[解決済み] JSクライアントサイドのExif Orientation。JPEG画像の回転とミラーリング

質問

デジタルカメラの写真は、多くの場合、EXIF "orientation"タグを付けてJPEGで保存されています。正しく表示するためには、設定された方向に応じて画像を回転/ミラーリングする必要がありますが、ブラウザはこの情報を無視して画像をレンダリングします。大規模な商用ウェブアプリでさえ、EXIF Orientation のサポートは不完全な場合があります。 1 . また、同じソースに、以下のような素晴らしいまとめがあります。 8種類のオリエンテーション は、JPEGが持つことができます。

<イグ

サンプル画像は、以下のサイトでご覧いただけます。 4 .

問題は、クライアント側で画像を回転/ミラーリングして、正しく表示し、必要に応じてさらに処理できるようにするにはどうしたらいいかということです。

orientation 属性を含む EXIF データを解析する JS ライブラリが用意されています。 2 . Flickr は、大きな画像を解析する際にパフォーマンスの問題が発生する可能性があることを指摘し、ウェブワーカーを使用することを要求しています。 3 .

コンソールツールで画像の向きを正しく変更できる 5 . この問題を解決する PHP スクリプトは、次のサイトで入手できます。 6

解決方法は？

githubプロジェクト JavaScript-ロードイメージ は、EXIF の向きに関する問題を完全に解決し、8 種類すべての EXIF の向きに合わせて画像を正しく回転/ミラーリングします。のオンラインデモをご覧ください。 javascript exif オリエンテーション

画像はHTML5のキャンバスに描画されます。その正しいレンダリングは js/load-image-orientation.js を、canvas の操作によって実行します。

これで誰かの時間を節約し、検索エンジンにこのオープンソースの宝石を教えることができるといいのですが :)