이번에는 H5가 사진을 찍고 압축하기 위해 카메라를 호출할 때 주의 사항을 알려드리겠습니다. 다음은 실제 사례입니다.
문서를 정리하다가 카메라를 호출하여 사진을 찍고 이미지를 압축하는 H5의 예제 코드를 찾아서 공유하기 위해 조금 정리하고 간소화했습니다.
Background
최근 h5 페이지를 만들었습니다. 주요 기능은 카메라를 호출하여 사진을 찍거나 앨범에서 사진을 선택하고 사진을 base64로 압축한 다음 백엔드 서버에 업로드한 다음 서버에 업로드하는 것입니다. 인식 결과를 반환합니다.
프런트 엔드의 주요 기능 포인트는 다음과 같습니다.
H5에서 카메라를 호출하는 방법
사진을 압축하는 방법
사진을 base64로 변환
H5로 카메라 호출/ album
카메라를 호출하는 가장 쉬운 방법 그냥 입력 파일[camera]attribute:
<input type="file" capture=camera accept="image/*">//相机
<input type="file" accept="image/*">//相册
로그인 후 복사
을 사용하세요. 이 방법의 호환성에는 여전히 문제가 있습니다. 카메라는 iPhone에서 정상적으로 열 수 있지만 이후에는 가능합니다. 안드로이드 폰을 클릭하면 카메라, 갤러리, 파일 관리자 등이 혼합됩니다. 인터넷으로 이것저것 검색해봤지만 마땅한 해결방법이 없어 계속해서 글을 쓰게 되었습니다. . .
이미지 압축
이미지 압축이 곧 사용됩니다FileReader和<canvas>.
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%로 설정되어 있으며 설정이 너무 작으면 이미지가 왜곡됩니다. <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');
});로그인 후 복사
다음은 아이폰으로 사진찍기에 해당하는 각 방향값의 의미입니다.
| orientation |
Description |
| 3 |
아이폰 가로화면 촬영시, 홈버튼은 왼쪽에 있습니다 , 사진을 원래 위치를 기준으로 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("只能识别图片！")
}
});로그인 후 복사
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 도서:
H5의 기록 모드 사용에 대한 자세한 설명
로컬 저장소 및 세션 저장소 사용 기록
위 내용은 H5는 카메라를 호출하여 사진을 찍고 사진을 압축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
