JS IOS 에서 사진 미리 보기 회전 90 도 BUG 문제 해결

위의 글[Js Canvas 를 이용 하여 이미지 압축 기능 실현]에서 사진 압축 업 로드 를 했 지만 IOS 리 얼 테스트 를 할 때 그림 미리 보기 할 때 자동 으로 시계 반대 방향 으로 90 도 회전 한 것 을 발견 했다.이 bug 에 대해 저 는 문제 가 어디 에 있 는 지 전혀 모 르 겠 습 니 다.다음은 바 이 두 를 대상 으로 프로 그래 밍 을 하 는 것 입 니 다.도 모 를 통 해 관련 자 료 를 찾 았 고 해결 방법 은 여기에 기록 되 어 있다.이 문제 의 구체 적 인 요 소 는 사실 왜 일 어 났 는 지 잘 모 르 겠 습 니 다.IOS 와 일부 삼 성 휴대 전화 만 이 bug 가 발생 할 수 있 습 니 다.대부분의 안 탁 기 는 이런 문제 가 없다.
이 문 제 를 해결 하려 면 제3자 JS 라 이브 러 리 를 도입 해 야 합 니 다:exif.js 다운로드 주소:https://github.com/exif-js/exif-js exif.js 를 통 해 우 리 는 사진 의 메타 정 보 를 얻 을 수 있 는데 그 중에서 사진 의 촬영 방향 을 포함한다.
그리고 exif.js 가 제시 한 사진 방향 속성 은 다음 그림 과 같다.

IOS 에서 exif.js 를 통 해 사진 을 찍 은 그림 의 방향 을 얻 고 돌아 오 는 값 은 6 이 며 위의 그림 의 맨 왼쪽 F 의 경우 입 니 다.이것 도 바로 우리 bug 가 있 는 곳 입 니 다.따라서 우 리 는 방향 을 판단 하 는 값 을 통 해 해당 하 는 처 리 를 하고 값 이 6 이면 그림 을 회전 교정 합 니 다.
구체 적 인 코드 는 다음 과 같다.

//      
function getPhotoOrientation(img) {
   var orient;
   EXIF.getData(img, function () {
      orient = EXIF.getTag(this, 'Orientation');
   });
   return orient;
}

다음 에 우 리 는 위의 글 중의 압축 함 수 를 다음 과 같이 수정 할 것 이다.

//    
function compress(img, width, height, ratio) {
   var canvas, ctx, img64, orient;
　　　 
   //      
   orient = getPhotoOrientation(img);

   canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;

   ctx = canvas.getContext("2d");

   //        6 ，     ，       
   if (orient == 6) {
      ctx.save();
      ctx.translate(width / 2, height / 2);
      ctx.rotate(90 * Math.PI / 180);
      ctx.drawImage(img, 0 - height / 2, 0 - width / 2, height, width);
      ctx.restore();
   } else {
      ctx.drawImage(img, 0, 0, width, height);
   }

   img64 = canvas.toDataURL("image/jpeg", ratio);
   return img64;
}

OK,문제 해결!
이상 의 JS 는 IOS 에서 사진 을 찍 고 90 도 회전 하 는 BUG 를 미리 보 는 문 제 를 해결 하 는 것 이 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.