まんぼう日記

takataka's diary

はてなブログに載せた画像が回転して見えることがあるのです

たまたま自分の記事を iPhone で眺めていたら,一部の写真の向きがおかしくなってることに気づきました.以下の2枚がちょうどいい例です.

 

f:id:takatakamanbou:20141123200208j:plain f:id:takatakamanbou:20141123200213j:plain

 

いろいろ観察してみた結果,次のことがわかりました.

  • Mac OS X 上の「プレビュー」ではちゃんとした向きに見えている
  • はてなブログの記事に貼付けて,Mac OS X 上のブラウザ(ChromeとSafariで確認しました)で見ると,どちらの写真もちゃんとした向きに見えている
  • でも,その記事を iPhone (iOS 8.1.1) 上のブラウザ(ChromeとSafari)で見ると,右のキリンの方だけ向きがおかしくなって見える
  • はてなフォトライフにアップロードした画像も,OS X 上のブラウザだとちゃんと見えて,iPhoneで見るとキリンの方だけ向きが変
  • OS X 上で,ImageMagick の display コマンドで画像を表示させると,「プレビュー」で見たときとは違い,キリンの方は向きが変

これは,画像に付加されてる Exif 情報か何かが悪さしてるかも,と思って, Mac OS X の「プレビュー」で「ツール」→「インスペクタを表示」して「詳細情報」ウィンドウの「一般」タブを見ると,

  • 左の写真では「画像方向」が「1(標準)」
  • キリンの方は「画像方向」が「6(反時計回りに90°回転)」

となってました.これが原因のようです.

 

いろいろ調べたところ,ImageMagick で -auto-orient というオプションをつけると,上記のExif情報を反映した向きで画像を扱い,さらに「画像方向」を 1 にセットしてくれるということがわかりました: ImageMagick: Command-line Options 

$ convert -auto-orient hoge.jpg fuga.jpg

とかやると,hoge.jpg の向きを「画像方向」に合わせて回転した上で「画像方向」を1にリセットした画像 fuga.jpg を得ることができます.キリンさんで試すと以下の通り,ちゃんとして見えるようになりました.

 

f:id:takatakamanbou:20141127005046j:plain

 

個々の画像について手動でこの作業をやるのはいやんなので,シェルスクリプト書きました.

だいぶ手抜きです….同じディレクトリ内にある拡張子が jpg の画像全てについて,ImageMagickの identify コマンドでそのExif情報を取得し,「画像方向」が 1 でないものについては,convert -auto-orient したものをファイル名の後ろに ori を付け足した名前で書き出す,というものです.最初の IFS なんちゃらは,ファイル名に空白を含むものを扱いたかったので,区切り文字を改行に変更してる部分.

 

ところで,この問題っていったい誰のせいなんでしょう? 写真を撮った iPhone の iOS ? 画像を保存してる Mac OS X? はてなフォトライフ? はてなブログ?