HTML5에서 사진을 찍고 이미지를 압축하기 위해 카메라를 호출하는 방법에 대한 자세한 설명

이 글에서는 사진을 찍고 압축하기 위해 카메라를 호출하는 H5의 예제 코드를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다.

문서를 정리하고, 카메라를 호출하여 사진을 찍는 H5의 예제 코드를 검색하고, 사진을 압축하고, 정리하고 공유하기 위해 조금 간소화합니다.

Background

최근 h5 페이지를 만들었습니다. 주요 기능은 카메라를 호출하여 사진을 찍거나 앨범에서 사진을 선택하고 사진을 base64로 압축한 다음 백엔드 서버에 업로드한 다음 서버에 업로드하는 것입니다. 인식 결과를 반환합니다.

프런트 엔드의 주요 기능 포인트는 다음과 같습니다.

1. H5에서 카메라를 호출하는 방법

2. 사진을 압축하는 방법

3. 사진을 base64로 변환

H5로 카메라 호출/ album

카메라를 호출하는 가장 쉬운 방법 그냥 입력 파일 [camera] 속성을 사용하세요:

<input type="file" capture=camera accept="image/*">//相机
<input type="file" accept="image/*">//相册

이 방법의 호환성에는 여전히 문제가 있지만, iPhone에서는 카메라가 정상적으로 열릴 수 있습니다. Android 휴대폰을 클릭하면 카메라, 갤러리, 파일 관리자 등이 열립니다. 혼합 선택. 인터넷으로 이것저것 검색해봤지만 마땅한 해결방법이 없어 계속해서 글을 쓰게 되었습니다. . .

이미지 압축

이미지 압축이 곧 사용됩니다FileReader和<canvas>.

FileReader 개체를 사용하면 웹 응용 프로그램에서 읽을 파일이나 데이터를 지정하는 File 또는 Blob 개체를 사용하여 컴퓨터에 저장된 파일의 내용을 비동기식으로 읽을 수 있습니다.

<canvas>는 스크립트를 이용해 그래픽을 그릴 수 있는 HTML 요소입니다.

이미지 압축은 이미지의 해상도와 품질을 압축해야 합니다. 해상도 압축의 경우 이미지의 최대 측면을 800으로 설정하고, 반대쪽은 이미지의 원래 비율에 따라 크기를 조정할 수도 있습니다. 이미지의 크기 조정 비율.

var MAX_WH=800;
var image=new Image();
image.onload=function () {
  if(image.height > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.width *= MAX_WH/ image.height;
    image.height = MAX_WH;
  }
  if(image.width > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.height *= MAX_WH/ image.width;
    image.width = MAX_WH;
  }
}
image.src=dataURL;//dataURL通过FileReader获取

그리고 압축된 이미지의 품질이 있습니다. 여기서 압축은 80%로 설정되어 있으며 설정이 너무 작으면 이미지가 왜곡됩니다. <canvas> 태그를 동적으로 생성한 다음 이미지를 압축합니다.

var quality=80;
var cvs = document.createElement('canvas');
cvs.width = image.width;
cvs.heigh = image.height;
var context=cvs.getContext("2d");
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);

그런 다음 이를 서버에 업로드하고 서버 결과를 표시합니다. . . iOS 휴대폰에서 사진을 촬영할 때 압축 후 사진이 설명할 수 없을 정도로 회전됩니다. 계속해서 문제를 해결하세요.

IOS 이미지 회전 솔루션

먼저 EXIF.js를 인용하고 EXIF.getData 및 EXIF.getTag를 통해 사진 방향 정보를 가져옵니다.

//file通过input标签获取
EXIF.getData(file,function(){
  orientation=EXIF.getTag(file,'Orientation');
});

다음은 iPhone으로 사진 촬영에 해당하는 각 방향 값의 의미입니다.

orientation	Description
3	iphone 가로 화면 촬영, 이때는 집 버튼은 왼쪽에 있습니다. 측면은 원래 위치를 기준으로 180도 회전한 사진입니다
6	아이폰은 세로모드로 촬영한 상태입니다. 이때 홈버튼은 아래에 있습니다. 폰), 사진은 원래 위치를 기준으로 시계 반대 방향으로 90도 회전할 수 있습니다
8	이때 iPhone은 세로 모드로 촬영되며 홈 버튼이 상단에 있고 사진이 90도 회전됩니다. 도는 원래 위치를 기준으로 시계 방향

사진의 방향 정보를 얻은 후, 얻은 값을 기준으로 해당 회전 연산을 수행합니다.

switch (orientation) {
  case 6:
  case 8:
    cvs.width = height;
    cvs.height = width;
    break;
}
var context=cvs.getContext("2d");
switch(orientation){
  //iphone横屏拍摄，此时home键在左侧
  case 3:
  // 180度向左旋转
  context.translate(width, height);
  context.rotate(Math.PI);
  break;
  //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
  case 6:
  context.rotate(0.5 * Math.PI);
  context.translate(0, -height);
  break;
  //iphone竖屏拍摄，此时home键在上方
  case 8:
  // 逆时针旋转90度
  context.rotate(-0.5 * Math.PI);
  context.translate(-width, 0);
  break;
}

그러다가 사진을 올려보니 IOS에서는 사진이 정상적으로 나오더라구요.

전체 코드는 다음과 같습니다.

$('input[type=file]').change(function(e) {
  var file = this.files[0];
  var mime_type=file.type;
  var orientation=0;
  if (file && /^image\//i.test(file.type)) {
    EXIF.getData(file,function(){
      orientation=EXIF.getTag(file,'Orientation');
    });

    var reader = new FileReader();
    reader.onloadend = function () {
      var width,height;
      var MAX_WH=800;
      var image=new Image();
      image.onload=function () {
        if(image.height > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.width *= MAX_WH / image.height;
          image.height = MAX_WH;
        }
        if(image.width > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.height *= MAX_WH / image.width;
          image.width = MAX_WH;
        }
        //压缩
        var quality=80;
        var cvs = document.createElement('canvas');
        cvs.width = width = image.width;
        cvs.height =height = image.height;

        switch (orientation) {
          case 6:
          case 8:
            cvs.width = height;
            cvs.height = width;
            break;
        }

        var context=cvs.getContext("2d");

        //解决ios图片旋转问题 
        switch(orientation){
          //iphone横屏拍摄，此时home键在左侧
          case 3:
          // 180度向左旋转
          context.translate(width, height);
          context.rotate(Math.PI);
          break;
          //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
          case 6:
          context.rotate(0.5 * Math.PI);
          context.translate(0, -height);
          break;
          //iphone竖屏拍摄，此时home键在上方
          case 8:
          // 逆时针旋转90度
          context.rotate(-0.5 * Math.PI);
          context.translate(-width, 0);
          break;
        }
        context.drawImage(image, 0, 0,image.width, image.height);
        dataURL = cvs.toDataURL('image/jpeg', quality/100);
        //获取识别结果
        ...
      }
      image.src=dataURL;
    };
    reader.readAsDataURL(file);
  }else{
    alert("只能识别图片！")
  }
});

위 내용은 HTML5에서 사진을 찍고 이미지를 압축하기 위해 카메라를 호출하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!