サイトに画像アップロードすると向きがおかしくなる問題 #Rails

最近、「デジカメで撮影した画像がプレビューでは正常に表示されるのに、いざアップロードすると横向きになる。」という問題にぶつかったのですが、その際に調べたことならびに解決策をまとめてみます。

結論

先に結論を書いておくと、Exif の orientation に起因する問題でした。

アプリケーションは Rails で、アップロード周りは CarrierWave + MiniMagick を使っているので、以下のようなワークアランドを入れました。

config/initializers/carrierwave.rb

module CarrierWave
  module MiniMagick
    def fix_exif_rotation
      manipulate! do |img|
        img.auto_orient
        img = yield(img) if block_given?
        img
      end
    end
  end
end

app/uploaders/your_image_uploader.rb

class YourImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  process :fix_exif_rotation

  snip...

end

原因調査

本問題を最初に発見した時は、なかなか原因に当たりがつきませんでした。

というのも、ブラウザで見ると90度回転しているにも関わらず、URL直接指定すると正常に表示されており、またダウンロードしてプレビューアプリで見ても正常に表示されていたからです。

CSSに原因があるのではないかと Inspector で調べるも、怪しいところは発見されず悶々としていたところ、同僚エンジニアが https://twitter.com/pastak/status/436793706377535488 という tweet を教えてくれ、これが解決の糸口となりました。

実際に identify コマンドで確認すると、orientation が 6（時計回りに90度回転）となっていることが確認できました。

$ identify -vervose file-name.jpg

  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Mime type: image/jpeg
  Class: DirectClass
  Geometry: 800x600+0+0

  snip...

  exif:Orientation: 6
  exif:ResolutionUnit: 2

解決策

今回はかなり一般的な問題（自身は知らなかったわけですが^^）だったので、解決策を見つけるのはさほど難しくありませんでした。書いたコードは冒頭の通りです。

関連する CarrierWave のコードとドキュメントも読んだので、ここに記載しておきます。

まとめ

Exifについて詳しくなかったので勉強になりました。同時に、引き出しをたくさん持っていたほうが問題解決スピード早いよね、ということも改めて実感しました。

最後に、解決策を探すにあたって参考にしたサイトを挙げておきます。