JS를 사용하여 촬영한 IOS 사진의 미리보기를 90도 회전하는 방법

이번에는 JS를 사용하여 촬영한 IOS 사진의 미리보기를 90도 회전시키는 방법을 보여드리겠습니다. 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

이 문제를 해결하려면 타사 JS 라이브러리를 도입해야 합니다: EXIF.js 다운로드 주소: https://github.com/exif-js/exif-js 이미지에는 다음이 포함됩니다. 사진을 촬영한 방향을 포함합니다.

EXIF.js에서 제공하는 사진 방향 속성은 IOS에서 EXIF.js를 통해 촬영된 사진의 방향을 얻는 데 사용됩니다. 반환 값은 6이며, 이는 위 사진에서 가장 왼쪽 F의 경우입니다. 이것이 우리의 버그가 있는 곳입니다. 따라서 방향의 값을 판단하여 해당 처리를 수행합니다. 값이 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;
}

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

추천 도서:

위 내용은 JS를 사용하여 촬영한 IOS 사진의 미리보기를 90도 회전하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!