이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!