画像の向きを補正するブラウザ

iOSのSafariで画像を表示すると、Exif情報に基づいて自動で画像の向きが補正されます。iOSのChromeやSleipnirでも同様に画像の向きが補正されることから、この補正はモバイルWebkitを利用するブラウザに共通する挙動のようです。（iOSのChromeについては「データ使用量を節約」を利用している場合は画像からExif情報が削除されているようで画像の向きが補正されません。）

気になって、Exifによる画像の向き補正の挙動について調べてみたところ下表のとおりでした。imgタグでページに埋め込まれた画像は向きを補正しないが、画像を直接（URL指定で）表示した場合には向きを補正するというブラウザもありました。

ブラウザ毎のExifに基づく画像向き補正の有無
（◯：画像向き補正有り ×：画像向き補正無し）

os	ブラウザ	埋め込み表示（imgタグ使用時）	直接表示（URL指定時）
iOS 7.0.4 (iPhone5)	Chrome	○	○
	Safari	○	○
	Sleipnir	○	○
Android 4.4.2 (Nexus7)	Chrome	×	×
	Firefox	×	○
	Sleipnir	×	○
Windows7	Chrome32	×	○
	Chrome33	×	○
	Safari5.1.7	×	×
	Firefox27	×	○
	IE8～IE11	×	×

画像の直接表示時の挙動についてはブラウザごとにさまざまですが、imgタグでの表示時に向きを補正するのは調べた範囲ではモバイルWebkitを使っているiOSのブラウザのみのようです。こちらの記事によると上記含めて各ブラウザーごとの挙動に至った経緯含めて調査されています。

Webサービスはどう対応するか

画像の向きをExif情報を元に事前に補正してWeb上で利用する場合には、ブラウザ側での自動補正は特に問題になりませんが、デジカメやiPhoneで撮影した画像をそのままWebにアップロードして利用するとなるとブラウザ毎の画像向き補正を考慮する必要があります。特にWebページ上でjavascriptを使って画像の向き補正をしている場合や画像のExif情報に基づいて画像表示を切替えるアプリやサービスを提供している場合は上記のブラウザ差分を考慮した実装が必要となってきます。モバイルWebkitであるかどうかを考慮して画像の向き補正処理をする必要があります。

モバイルWebkitの判定方法については、javascriptで以下のようなコードで対応できそうです。

isAutoRotate = RegExp(" AppleWebKit/").test(navigator.userAgent) && RegExp(" Mobile/").test(navigator.userAgent);

1 2	isAutoRotate = RegExp(" AppleWebKit/").test(navigator.userAgent) && RegExp(" Mobile/").test(navigator.userAgent);

埋め込み画像の向きを補正するブラウザの場合はisAutoRotateがtrueとなる。

Chrome for iOSについて

データ圧縮機能を利用しているChrome for iOSについては画像の向きが補正されませんが、対処は難しそうです。そもそも画像からExifが削除された状態でブラウザにキャッシュされてしまうため、スクリプト側で画像のExifを参照することもできず、具体的な対処方法が思いついていません。

お暇があれば

ブラウザ毎の画像の自動回転補正について調べています。ブラウザによる画像向き補正確認用ページを作成しましたので暇があればご確認ください。本記事の情報が間違っていないか、私の持っていないハード（iPad等）での挙動等、コメントにて教えて頂ければ幸いです。

参考URL

iOSのSafariとChromeだけ画像のExif情報を参照して画像の向きを補正して表示してる
 ブラウザーと画像のEXIFのお話