JSを使用してIOSで撮影した写真のプレビューを90度回転する方法

今回は、JSを使ってIOSで撮影した写真のプレビューを90度回転する方法を紹介します注意点は何ですか?実際のケースを見てみましょう。

この問題を解決するには、サードパーティの JS ライブラリを導入する必要があります: exif.js ダウンロード アドレス: https://github.com/exif-js/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 中国語 Web サイトの他の関連記事に注目してください。 ！

推奨読書:

以上がJSを使用してIOSで撮影した写真のプレビューを90度回転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。