H5에서 사진을 찍고 압축하기 위해 카메라를 호출하는 방법-H5 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-01-12 09:22:36

원래의

2808명이 탐색했습니다.

이번에는 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%로 설정되어 있으며 설정이 너무 작으면 이미지가 왜곡됩니다.