ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。