<input type="file"> で iOS から写真をアップロードする際に気をつけること、それは写真の選択によってアップロードされる画像の中身が微妙に変わることです。

上にある「写真を撮る」と「フォトライブラリ」で異なります。

何が違うのか？

写真のメタ情報フォーマットが異なります。

写真を撮る: JFIF
フォトライブラリ: Exif

JFIF とは

写真を撮るからアップロードされるファイルは JFIF フォーマットになっています。JFIF というのは米C-Cube Microsystems社によって提唱された画像メタ情報を埋め込むためのフォーマット仕様です。具体的には SOI (0xFF D8 ) の直後に APP0 Marker ( 0xFF E0 ) がきます。解像度やサムネイルの情報が格納されています。

もしサムネイルがある場合は、この後にサムネイル情報が来ますが iOS で作成されるデータにはサムネイルは含まれていません。そして、APP0 の次に APP1 Marker つまり Exif の情報が来ます。

つまり、「写真を撮る」でアップロードした画像の回転情報を取得したい場合は、APP0 を飛ばして APP1 を探す必要があります。Exif の仕様としては SOI の直後に APP1 Marker が来るはずなので、それを信じて 3byte 目を直接読むと JFIF だったという罠に陥るので注意です。僕はそれにはまりました…。

(* なお位置情報は含まれていません )

Exif とは

フォトライブラリから選択してアップロードされるファイルは Exif フォーマットになっています。 (* アプリなどで Exif 情報を削除してたりすると当然存在しません ) 画像の回転情報や位置情報は Exif に含まれているので、利用したい場合は Exif の APP1 Marker の場所を探すのが良いでしょう。

Exif を JavaScript でパースする方法は他の記事で紹介しているので参考にしてみてください。

JavaScript で Exif の Orientation をパースして画像を正しく表示する方法

参考

JFIF version 1.02