H5에서 사진을 찍고 압축하기 위해 카메라를 호출하는 방법

이번에는 H5를 사용하여 카메라를 호출하여 사진을 찍고 사진을 압축하는 방법을 보여 드리겠습니다. H5가 카메라를 호출하여 사진을 찍고 압축하는 주의 사항은 무엇인가요?

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

Background

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

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

H5에서 카메라 호출 방법

사진 압축 방법

사진을 base64로 변환

H5로 카메라/앨범 호출

가장 쉬운 방법 카메라는 입력 파일 [camera] 속성을 사용하는 것입니다:

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

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

이미지 압축

이미지 압축에는 FileReader와 가 필요합니다.

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

는 스크립트를 사용하여 그래픽과 간단한 애니메이션을 그릴 수 있는

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%로 설정되어 있으며 설정이 너무 작으면 이미지가 왜곡됩니다. 태그를 동적으로 생성한 다음 이미지를 압축합니다.

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');
});

이미지의 방향 정보를 얻은 후, 얻은 값을 기반으로 해당 회전 작업을 수행합니다.

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;
}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5 모바일 QR 코드 스캐닝을 구현하는 방법

SVG 다채로운 링 카운트다운을 시작하는 방법

HTML5가 도메인 간 통신을 수행하는 방법

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