背景
webviewベースのiOSアプリ作成中、(サーバーサイドはRails)
iPhoneの画像をS3にuploadして表示するという機能を作っていた時のこと
症状
uploadした画像をimgタグで表示すると問題ないが、cssのbackground-imageで画像を表示しようとすると向きが90°ずれている
原因
[PHP] iPhoneからメールで送信した画像の向きを修正する方法
まさにこれ。
Phoneを縦向き状態で縦画像を撮影した場合でも、iPhone内には横画像(横長の画像)として保存されています。
ではなぜiPhoneでは縦画像を問題なく表示できるかというと、画像データの中に含まれている『Exif』という画像情報に画像の向きが書きこまれているためです。
解決方法
ImageMagickでjpegの縦横(exifのOrientation)情報を元に画像を回転する
こちらを参考に、Magick::Image#auto_orient!を利用することで解決しました。