web画像の向きを補正するブラウザiOSのSafariで画像を表示すると、Exif情報に基づいて自動で画像の向きが補正されます。iOSのChromeやSleipnirでも同様に画像の向きが補正されることから、この補正はモバイルWebkitを利用するブラウザに共通する挙動のようです。(iOSのChromeについては「データ使用量を節約」を利用している場合は画像からExif情報が削除されているようで画像の向きが補正されません。)気になって、Exifによる画像の向き補正の挙動について調べてみたところ下表のとおりでした。imgタグでページに埋め込まれた画像は向きを補正しないが、画像を直接(URL指定で)表示した場合には向きを補正するというブラウザもありました。画像の直接表示時の挙動についてはブラウザごとにさまざまですが、imgタグでの表示時に向きを補正するのは調べた範囲ではモバイルWebkitを使っているiOSのブラウザのみのようです。こちらの記事によると上記含めて各ブラウザーごとの挙動に至った経緯含めて調査されています。Webサービスはどう対応するか画像の向きをExif情報を元に事前に補正してWeb上で利用する場合には、ブラウザ側での自動補正は特に問題になりませんが、デジカメやiPhoneで撮影した画像をそのままWebにアップロードして利用するとなるとブラウザ毎の画像向き補正を考慮する必要があります。Webページ上でjavascriptを使って画像の向き補正をしている場合や画像のExif情報に基づいて画像表示を切替えるアプリやサービスを提供している場合は上記のブラウザ差分を考慮した実装が必要となってきます。モバイルWebkitであるかどうかを考慮して画像の向き補正処理をする必要があります。モバイルWebkitの判定方法については、javascriptで以下のようなコードで対応できそうです。Mobile/").test(navigator.userAgent);埋め込み画像の向きを補正するブラウザの場合はisAutoRotateがtrueとなる。iOSについては画像の向きが補正されませんが、対処は難しそうです。そもそも画像からExifが削除された状態でブラウザにキャッシュされてしまうため、スクリプト側で画像のExifを参照することもできず、具体的な対処方法が思いついていません。お暇があればブラウザ毎の画像の自動回転補正について調べています。ブラウザによる画像向き補正確認用ページを作成しましたので暇があればご確認ください。本記事の情報が間違っていないか、私の持っていないハード(iPad等)での挙動等、コメントにて教えて頂ければ幸いです。2014の18日目の記事です。hubotから...記事を読むWordPressテーマSimplicityをアイキャッチ画像無しで使うSimplicityというシンプルで最近評判のWordPressテーマをブログに導入してみました。Containers」を使うまでのメモです。モバイル版Chromeには「データ使用量を節約」という機能があり、訪問先ページの内容をGoogleサーバ経由で圧縮することで、データ...記事を読むhubotからRedisにアクセスするhubot経由でRedisへの簡易なアクセスを可能にするhubot-scriptを書きましたので、誰か使う人がいるかもと思いご紹介します。...記事を読むブラウザによる画像向き補正確認用ページ以下に表示されている画像の文字が左右逆だったり横倒しになっている場合、お使いのブラウザは画像をimgタグで表示する際に向きを補正しません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。