こんにちわ、ここ数日娘から風邪をもらい絶不調の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データがこちらになります。
.exif2{
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.exif3{
-webkit-transform: scale(-1, -1);
-moz-transform: scale(-1, -1);
transform: scale(-1, -1);
}
.exif4{
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
transform: scale(1, -1);
}
.exif5{
-webkit-transform: rotate(90deg) scale(1, -1);
-moz-transform: rotate(90deg) scale(1, -1);
transform: rotate(90deg) scale(1, -1);
transform-origin: left top;
}
.exif6{
-webkit-transform: rotate(90deg) translate(0,-100%);
-moz-transform: rotate(90deg) translate(0,-100%);
transform: rotate(90deg) translate(0,-100%);
transform-origin: left top;
}
.exif7{
-webkit-transform: rotate(90deg) rotateY(180deg) translate(-100%,-100%);
-moz-transform: rotate(90deg) rotateY(180deg) translate(-100%,-100%);
transform: rotate(90deg) rotateY(180deg) translate(-100%,-100%);
transform-origin: left top;
}
.exif8{
-webkit-transform: rotate(270deg) translate(-100%,0);
-moz-transform: rotate(270deg) translate(-100%,0);
transform: rotate(270deg) translate(-100%,0);
transform-origin: left top;
}
Orientationの値に合わせてクラス名を命名しております。例えば、Orientationの値が2であれば「.exif2」というクラス名になります。1に関しては傾きがないので何も対応しなくて大丈夫です。
Orientationの値はjsのプラグインなどで取得できるので、jQuery等を併用してOrientationの値にあったクラス名を該当要素に付与するなどして対応すれば問題ないかと思います。
なお、環境によって表示位置等のずれが生じる可能性もあるので、その点は環境に合わせてカスタマイズしてみてください。
まとめ
ということで、今回はExifデータを持つ画像の向きをcssで調整する方法を紹介させていただきました。
スマホサイトでユーザーの画像を使ったキャンペーン等では必ずと言っていいほどExifの問題に直面しますが、表示の調整だけならcssでどうにかなるので参考にしてみてください。
それでは今回はここまで！Hahsiでした。また！