読者です 読者をやめる 読者になる 読者になる

Pastalablog in はてな

時代はブログ! 日記もあるよ→http://pastak-diary.hatenadiary.com

ブラウザーと画像のEXIFのお話

発端

調べた

この記事はiOSSafariChromeって書いてるけど、iOSChromeはWebViewを埋め込んでいるだけなのでiOSSafariと同じ描画をしてもおかしくないなぁという感じ。

この記事も書いている通り今でも各ブラウザはEXIFを無視するんだけど、どうなってるのが正解なのかなぁと思って関連するディスカッションを漁った。(議論はいくつか存在してますが、代表的っぽいのしか読んでないのでそれのURLを列挙しています。)(内容は多分合ってると思いますが、英語を斜め読みしたので間違っていたら教えて下さい)

要約

どうすべきみたいな統一した見解は無さそうで、特にFirefoxの議論を見ているとEXIFをこのタイミングで適応すると、現行のWebサイトなどに混乱が起きるかもしれないという危惧でEXIFは読まないという経緯になっていた。他も大体同じ感じっぽかった。

Firefox

いろいろあって、特に 298619 ではThunderbirdの話とかも飛び交ってるけど、最終的には

When displaying a standalone image, Firefox matches the EXIF orientation information contained within the JPEG image

(訳:画像単体の表示時に、JPEG 画像に含まれる EXIF 情報を利用して縦横を決めるようになりました。)

Support for the CSS image orientation property

(訳:CSS の image orientation 属性をサポートしました。)

via https://www.mozilla.org/en-US/firefox/26.0/releasenotes/

(日本語訳は http://www.mozilla.jp/firefox/26.0/releasenotes/ より)

ということになったようだった。

1つ目は画像を直接開いたらEXIF通りに回転させるというもので、2つ目はCSSimage-orientation: from-imageと書くとEXIF通りに回転させるプロパティを追加するというもの。ちなみに2つ目のfrom-imageプロパティはFirefoxGecko)でしかサポートされていないので注意。(一応from-imageキーワード自体はCSS Image Values and Replaced Content Module Level 4に追加されてる)

Chrome & Webkit

  1. Enable for full-page ImageDocuments.
  2. Add a preference (WebKitShouldRespectImageOrientation or something like that) to enable it globally.

 

By "globally" I meant "not just for full-page ImageDocuments, but for and others too", primarily so non-browser WebKit clients can choose to respect EXIF orientation everywhere if they so choose.

の方向でパッチが作成、取り込みが行われ、iOSではこの機能を<img>にも適当するようにしたようです。

Webサービスを作るときにどう扱うか。

普通にWebサービスを開発している人はこういうことをやっているんだろうけど、一応書いておきます。

AndroidiPhoneで写真を撮るとたまに端末の回転がちゃんと認識される前に撮影してしまって画像の向きが意図にそぐわない場合、ユーザーはギャラリーなどのビュワーの機能で画像を回転させる。この時大体のアプリはEXIFに回転情報を書き込んで、見た目回転したように見せてる。これはEXIFの仕様として正しいし、ユーザーも回転して見えてるので良い。この画像をこのままWebサービスなどにアップロードするとユーザーは画像が回転していることを期待するけど、前述のとおりで<img>の中ではEXIFは無視されるので、疑問に感じる。こういう時はサービス側で適切にやった方が良い。

ImageMagickのコマンドでauto-orientオプション使ってやると簡単です。EXIF情報はGPSとかが入ってるかもしれないので消しておいたほうが何かと安全なので、同時に-stripも合わせて使うとより良いかもです。

convert -auto-orient -strip input.jpg output.jpg

ちなみにMozillaのBoot2Geckoプロジェクトの中ではこういうJSでJPEGEXIFを読んでいるみたいですね

JSでEXIF情報を読むライブラリもあるようです。

EXIFで回転させた画像群、このリポジトリにあって便利