<img>で貼った画像がブラウザによって90度回転して表示される？

## 現象

iPhoneなどの携帯電話で撮った写真を`<img>`タグでwebページ上に貼り付けることを考えます。

以下の画像を検証に使います。

- [カキフライ定食](https://retty.me/area/PRE13/ARE1/SUB101/100000745468/)
![20161005-144725-027-IMG_2302.JPG](https://qiita-image-store.s3.amazonaws.com/0/54305/a7825e60-0995-dc7b-5513-432c35df280e.jpeg)

- ビール
![20161006-175838-396-IMG_2292.JPG](https://qiita-image-store.s3.amazonaws.com/0/54305/868288e5-fc8e-f2ea-f745-327d66d50ba0.jpeg)

これらの画像をそのまま img タグでwebページに貼り付けると…

- Mac Chrome
![スクリーンショット 2016-10-07 11.22.27.png](https://qiita-image-store.s3.amazonaws.com/0/54305/f50764ac-d172-a6b2-d27a-55742be62bf3.png)

- Mac Safari
![スクリーンショット 2016-10-07 11.24.05.png](https://qiita-image-store.s3.amazonaws.com/0/54305/0a8dc731-dabe-3f83-09e2-e7d893d32a0a.png)

- iOS (Simulator) Safari
![スクリーンショット 2016-10-07 11.25.44.png](https://qiita-image-store.s3.amazonaws.com/0/54305/627be0a5-bf12-97b3-dc19-882bb7c17ca1.png)

ビールはMac ChromeとMac Safariで90度左に回転してしまいます。
なぜかiOS Safariでは正しい方向で表示されています。


## 原因
iPhoneなどのスマホで撮った写真では、カメラをどの方向に向けて取ったとしても保存時に画像の回転は行われず、代わりに[EXIF情報](https://ja.wikipedia.org/wiki/Exchangeable_image_file_format)に回転情報(Orientation)が保存されます。

今回使った写真のうち、カキフライ定食は90°の方向で、ビールは0°の方向で撮影したものでした。

![iPhone-orientation.png](https://qiita-image-store.s3.amazonaws.com/0/54305/dc406085-4592-05e0-e707-50ae935af517.png)
画像のEXIF情報を覗いてみると、

- カキフライ定食 (**方向:1 (標準)**)
<img width="177" alt="スクリーンショット 2016-10-07 11.10.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/54305/f24c283c-1a11-5228-2306-27e6d18bfaa7.png">

- ビール (**方向:6 (反時計回りに90°回転)**)
<img width="177" alt="スクリーンショット 2016-10-07 11.10.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/54305/897e4f4e-9e6e-e8b3-6da1-fa4364a4d7f6.png">

となっているので、どうやら私のiPhone (5s, iOS 10.0.2)では、90°回転時の画像を保存し、方向をEXIFで指定しているようです。

ブラウザによって、EXIFを参照して画像の向きを補正するものとしないものがあるようで、
2013年ごろのやや古い情報によると、**iOSのブラウザ(Safari, Chrome)のみで、EXIF情報による向き補正がかかるようです**。
http://www.hideito.com/blog/archives/432

## 解決法
2パターンの解決方法があります。

- EXIF情報をサーバーで読み、EXIF情報をもとに画像を事前に回転させて保存する。
- EXIF情報をJavascriptで読み、ブラウザ上で回転させる。
  - このへんを使えばできそう https://github.com/blueimp/JavaScript-Load-Image

今回は1番目を採用し、ついでにEXIF情報を消すように実装してみます。

(EXIFを消しているのは、EXIFに含まれるGPS情報で、いつどこでビールを飲んでたのかがバレてしまうのを防ぐためです。)

<img width="157" alt="スクリーンショット 2016-10-07 13.05.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/54305/8834c7f6-29d8-12d1-40bd-60309ae11ccf.png">

（たまたまこのときはRailsを使っていたので、以下ではRubyの話をします。
他の言語でもきっと同じことができるはずです）

ImageMagickのRubyライブラリ[Rmagick](https://github.com/rmagick/rmagick)を使うと一発で回転できるようです。


```ruby
m_image.auto_orient! #EXIF情報をもとに、m_imageを回転させたものを返す

m_image.strip! #EXIF情報を消す
```

コード全体:

```ruby
image_original = File.open('/***/beer.jpg').read
rmagick_image = Magick::Image.from_blob(image_original).first
rmagick_image.auto_orient!
rmagick_image.strip!
image_rotated = rmagick_image.to_blob
```

これで、どのブラウザで表示しても正しい方向で表示される画像ができました。
あとは、特に気にすることなく img タグで画像を貼り付ければOKです。

## まとめ
EXIF情報をもとに画像を回転、EXIFを削除することで、
ブラウザ依存なく画像を正しい方向で表示させることができました。

ブラウザ依存について、iOSのSafari,ChromeでEXIFを基に画像が回転されることはわかっていますが、それ以外のブラウザ依存は、検証できる環境がなく確認していません。
何かあればコメントを頂けると幸いです。

## 参考
CentOSでのRMagickインストール方法
http://qiita.com/abgata20000/items/8a75779d296dbf57f913

## 付録

画像表示の検証に使用したhtmlソース(URLは改変されています)

```html
<html>
  <body>
    <img src="https://storage.googleapis.com/hoge/items/kakifurai.JPG" style="max-width: 100%;">
    <img src="https://storage.googleapis.com/hoge/items/beer.JPG" style="max-width: 100%;">
  </body>
</html>

```