【javacript】Canvasで画像のExifの向きを調整する方法

　こんにちわ、今日も気持ちの良い天気で最高ですね。さてさて、今回は仕事でCanvasで画像を扱う際にExif情報を持った画像の向きをjavascriptで調整をしなければならならいケースがあったので、備忘録も兼ねて紹介したいと思います。

「Exif」とは？

　Exifとは「Exchangeable image file format」の略になり写真データのメタデータ等が含まれる画像ファイルフォーマットになります。すべての画像データに存在するわけではないのですが、代表的なところで言うとスマートフォンで撮影した画像にはExif情報が含まれています。

　なお、Exif情報には「撮影日時」や「解像度」等の情報が含まれているのですが、今回はこの中に含まれる「撮影方向（Orientation）」に関する処理の仕方になります。

Exifの撮影方向は8種類に分かれる

　この撮影方向（Orientation）は8種類に分類されて、1〜8までの数値が下表のように割り当てられ、それぞれ撮影方向が記録されています。

撮影方向によって生じる問題

　このExifデータの撮影方向が実は曲者で、例えばあるシステムにアップロードして表示したり加工したりする場合に通常のやり方でやるとある問題が生じます。

　例えば、2の上下反転のOrientaiotnを持っている画像をそのままアップロードして表示すると上下反転した画像が表示されてしまいます。これだとユーザーが認識している画像と別物になってしまうという問題が生じてしまうのです。

　実際にExifデータを持っている画像のサンプルがこちらにありますので、ダウンロードして実際に試していただければと思います。

CanvasにおけるExif Orientationの調整

　では、こういった特殊な撮影方向が記録されている画像データをCanvasでどのように処理するのか、実際にコードを交えて紹介していきたいと思います。

Exif処理をしない通常の場合

　まず、単純にFileAPIを使用してアップロードした画像を表示するサンプルコードがこちらになります。

　このサンプルは、コードを見ての通り、描画先の「canvas」と画像をアップロードする「input」タグがあり、javascriptでinputのステータスに変更があった場合にFileAPIで画像をcanvasにdrawImageを使って画像を描画しています。

　このサンプルを先ほど紹介したExifのサンプル画像で試してみると、「up.jpg」に関しては正常に表示されると思いますが、その他の画像は向きがおかしくなると思います。

exif.jsプラグインを使う

　では、この向きを調整していきましょう。

　まずは、Exif情報を取得する「exif.js」というプラグインを使用してExif Orientationの値を取得していきたいと思います。exif.jsはこちらにCDNのリンクがありますので、そちらをjQueryの後に読み込みます。

　プラグインを読み込んだら、下記のコードでExif Orientationの値が取得できるので、このコードを画像の読み込み後に追記します。

画像のアスペクト取得

　次に、画像の向きを調整するためにはオリジナル画像のアスペクトも必要になってくるので、画像のアスペクトを取得するコードも追記します。なお、画像の向きによって縦横のサイズが逆になっているので、それを考慮したコードが下記になります。

transformとrotateを使って向きの調整

　そして、最後にExifの向きを「transform」と「rotate」を使って、各方向それぞれに対応したコードを追記して終わりです。

　下記が完成版のコードになります。

　ポイントは、65行目からのswitch文になります。ここで「transform」と「rotate」を使って画像の向きの調整をしています。また、それぞれに合わせてcanvasの縦横サイズや描画サイズも調整しています。

まとめ

　ということで、今回はExifデータを持つ画像をCanvasで扱う場合の向きの調整のやり方を紹介させていただきました。

　なお、今回の方法に限らずプラグインなどを使用する方法もあるかと思うので、状況に応じて参考にしていただければと思います。

　それでは今回はここまで！また！