Exif情報を持った画像の表示をcssで調整する方法

 こんにちわ、ここ数日娘から風邪をもらい絶不調のHashiです。子供の風邪はエグいっすね。。

 さて、以前CanvasでExif情報を持った画像をjavascriptで調整する方法を紹介(下記関連記事)しましたが、今回はcssを使って画像の向きを調整する方法を紹介したいと思います。

 なお、cssで調整する方法は環境によって正しく動作しない可能性があるので正確性を求める場合はcanvasで調整する方法がおすすめです。

 ちなみに、「Exif」って何?という方は上の前回のjavascriptの記事を参照してください。

Exif Orientationの種類

 Exifがもっている傾きの情報Orientationは全部8つありぞれぞれ下表のようになっています。

撮影方向(Orientation)の定義

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

CSSのTransformを使って調整

 この8つのOrientationデータをもとにcssを使って表示の調整をしたいと思います。

 なお、今回は Transformを使用するのでTransformが動作するブラウザ限定という形になります。

 また、実際にExifデータをもった画像が欲しい方は、前回も使用したサンプル画像があるので、こちらを使用してみてください。

 では、実際に各Orientationに対応したcssデータがこちらになります。

 Orientationの値に合わせてクラス名を命名しております。例えば、Orientationの値が2であれば「.exif2」というクラス名になります。1に関しては傾きがないので何も対応しなくて大丈夫です。

 Orientationの値はjsのプラグインなどで取得できるので、jQuery等を併用してOrientationの値にあったクラス名を該当要素に付与するなどして対応すれば問題ないかと思います。

 なお、環境によって表示位置等のずれが生じる可能性もあるので、その点は環境に合わせてカスタマイズしてみてください。

まとめ

 ということで、今回はExifデータを持つ画像の向きをcssで調整する方法を紹介させていただきました。

 スマホサイトでユーザーの画像を使ったキャンペーン等では必ずと言っていいほどExifの問題に直面しますが、表示の調整だけならcssでどうにかなるので参考にしてみてください。

 それでは今回はここまで!Hahsiでした。また!

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

お仕事の依頼はこちら

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

タグ
css web

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

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