사진을 찍고 압축하기 위해 카메라를 호출하는 H5 코드 정보

이 글에서는 사진을 찍고 압축하기 위해 카메라를 호출하는 H5의 예제 코드를 주로 소개합니다. 내용이 꽤 좋아서 참고용으로 올려보겠습니다.

문서를 정리하다가 카메라를 호출하여 사진을 찍고 이미지를 압축하는 H5의 예제 코드를 찾아서 공유하기 위해 조금 정리하고 간소화했습니다.

Background

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

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

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

2. 사진을 압축하는 방법

3. 사진을 base64로 변환

H5에서 카메라/앨범 호출

카메라를 호출하는 가장 쉬운 방법 입력 파일 [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	아이폰은 세로 모드로 촬영되며, 사진은 위쪽에 있습니다. 원래 위치를 기준으로 시계 방향으로 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("只能识别图片！")
  }
});

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 권장 사항:

H5 새 속성 오디오 및 비디오의 제어 분석 정보

Angular에서 여러 H5 이미지를 업로드하는 방법

위 내용은 사진을 찍고 압축하기 위해 카메라를 호출하는 H5 코드 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!