シェアありがとうございます!

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

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

「Exif」とは?

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

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

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

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

撮影方向(Orientation)の定義

1 そのまま
2 上下反転
3 180度回転
4 左右反転
5 上下反転、時計周りに270度回転
6 時計周りに90度回転
7 上下反転、時計周りに90度回転
8 時計周りに270度回転

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

 この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で扱う場合の向きの調整のやり方を紹介させていただきました。

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

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

この記事のまとめ

  • Exifデータを持つ画像をCanvasで扱う際の向き調整の紹介
  • transformとrotateを使って向きの調整をする

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活を目指すフリーランスのWEBエンジニア兼デザイナー。大人になってもずっと遊んでいたい人。TwitterもInstagramも基本フォローバックするのでお気軽にフォローしてください!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です