49hack

見習いエンジニアが魔法使いになるまで

Carrierwaveでアップロードした画像が回転して表示されてしまう問題を解決する

結構ハマりました。

画像アップロードの構成としては、

  1. CarrierwaveでS3にアップロード
  2. nginxでS3にリバースプロキシ
  3. small_lightで指定サイズにリサイズして表示

という流れをとっています。

アップロードした画像をS3から確認してみると正しい向きで表示されたのですが、nginxのsmall_lightを介すと回転して表示されました。。

そのため、最初はnginxのsmall_lightが原因と考えて調査していたのですが、なかなか該当記事が見つからず。。。small_lightのオプションでangleも指定できますが、そんなことしてないし。。

原因

画像のExifのOrientationがおかしいのが原因で、nginxを介した際にそれを考慮して回転されてたものと思われます。(なんでS3では回転されなかったんだろう。。古いタイプのスマートフォンで撮影した写真で起きるっぽい。。)

解決方法

CarrierwaveでOrientationを正しい値に修正してから画像をアップロードするようにします。

class ImageUploader < CarrierWave::Uploader::Base

    include CarrierWave::RMagick

    process :fix_rotate

    # アップロードした写真が回転してしまう問題に対応
    def fix_rotate
        manipulate! do |img|
            img = img.auto_orient
            img = yield(img) if block_given?
            img
        end
    end
end

参考