문서를 정리하고 H5에 대한 인스턴스 코드를 검색하여 카메라를 호출하여 사진을 찍고 사진을 압축 한 다음 정렬하고 간소화하십시오.
배경최근에 H5 페이지를 만들고 싶습니다. 주요 기능은 카메라를 호출하여 앨범을 선택하고 사진을 Base64로 압축 한 다음 서버가 식별 결과를 반환하는 것입니다.
프론트 엔드의 주요 기능 지점은 다음과 같습니다.
카메라를 호출하는 가장 쉬운 방법은 입력 파일 [카메라] 속성을 사용하는 것입니다.
<입력 유형 = 파일 캡처 = 카레라 수락 = 이미지/*> // 카메라 <입력 유형 = 파일 수락 = 이미지/*> // 앨범
이 메소드 호환성은 여전히 iPhone 휴대 전화에서 카메라를 열 수 있지만 Android 휴대 전화를 클릭하면 카메라, 갤러리, 파일 관리자와 같은 혼합 된 선택 항목이 있습니다. 나는 인터넷에서 많은 좋은 솔루션을 검색했고 계속 기록 할 수있었습니다. 본질 본질
이미지 압축 사진 압축은 FileReader 및 <canvas> 사용하는 데 사용됩니다.
FilereAder 객체를 사용하면 웹 응용 프로그램이 컴퓨터에 저장된 파일의 내용을 비동기 적으로 읽고 파일 또는 Blob 객체를 사용하여 읽을 파일 또는 데이터를 지정할 수 있습니다.
<canvas>는 스크립트를 사용하여 그래픽과 간단한 애니메이션을 그릴 수있는 HTML 요소입니다.
사진 압축은 그림의 해상도와 품질을 압축해야합니다. 반면에 그림의 원래 비율에 따라 전체 스케일링 비율을 설정할 수 있습니다. 사진의.
var max_wh = 800; image.onload () {// width는 *= image.width *= max_wh/ ima입니다 image .height = max_wh; / dataurl은 filerereader를 통해 얻었습니다그런 다음 그림을 압축하는 품질이 80%로 압축됩니다. <canvas> 태그를 동적으로 생성 한 다음 그림을 압축합니다.
var quality = cvs.width = image.width = var context (2d); , 0, image.width, image.height);
그런 다음 서버에 업로드하고 서버를 표시 한 결과는 원활하지 않습니다. 본질 본질 iOS 휴대폰이 압축 된 후에는 그림이 설명 할 수 없을 정도로 회전하고 문제를 계속 해결합니다.
iOS 사진 회전을 해결하십시오첫 번째 견적 exif.js, exif.getData 및 exif.gettg를 통해 사진 방향 정보를 얻으십시오.
// 파일 exif.getData (file, function () {Orientation = exif.gettg (file, 'Orientation');});각 방향 값의 의미는 iPhone 휴대 전화에 해당하여 사진을 찍습니다.
| 정위 | 설명하다 |
|---|---|
| 3 | iPhone의 수평 스크린 촬영, 현재 홈 버튼은 왼쪽에 있으며, 그림은 원래 위치에 비해 180도 회전합니다. |
| 6 | iPhone은 수직으로 촬영합니다. 현재 홈 버튼은 아래에 있으며 (휴대폰의 방향), 그림은 원래 위치에 비해 90도 회전 할 수 있습니다. |
| 8 | iPhone은 수직 스크린을 촬영합니다. 현재 홈 버튼은 위에 있으며, 그림은 원래 위치에 비해 시계 방향으로 90도 회전합니다. |
스위치 (오리엔테이션) {CASE 8 : CVS.WIDTH = 높이; 이 시간에 왼쪽 케이스의 홈 키는 컨텍스트로 회전합니다. 정상적인 휴대 전화 6 : Context.rotate (0, -height); 8 : // 시계 방향으로 90도 컨텍스트를 회전합니다.그런 다음 그림을 업로드하고 iOS의 그림이 정상임을 찾으십시오.
전체 코드는 다음과 같습니다.
$ ( 'input [type = file]'). /i.test (file.type) {exif.getData (file, function () {exif.getTag (file, 'Orientation'); max_wh = 800; var image (); image.onload () {if (image.height> max_wh) {// width 및 기타 비율은 * = image * = max_wh/ image.head. image.head = max_wh;} if (images.width> max_wh) {// width 및 기타 비율은 *= image.height *= max_wh / image.width.width = max_wh;} / / compressed varging = var cvs = cvs.width = image.width; .height = width;} var context = cvs.getContext (2D); 왼쪽으로 회전합니다. 전화 6 : Context.rotate (0. -Height); 시계 반대 방향으로 (-0.5 * math.pi); image/jpeg ', question/100); )}});위는이 기사의 모든 내용입니다.