ざっくり結論
iOS の input[type=file] の仕様によりHeicファイルはExifが破棄される
jpegフォーマットの場合大丈夫な場合もある
そもそもiPhoneでheicファイルをブラウザ上からアップロードできない?
調査
(結構読まれたらスクショとかでわかりやすく更新します… )
前提 .heicファイル自体には Exifは存在する
iPhoneから直接heicファイルをとってきて、プレビューしてみてください。inspectするとちゃんとExifがいます。
xxdしてもそれっぽい文字列発見できました。
なにがしたかったん?
ブラウザから画像アップロードするときにクライアント側でリサイズしなくてはいけなかったところ、Exif消えてほしくないという要望があった。
blueimp-load-imageの機能でExifを取得し、リサイズしたBlobに再度Exif部分のバイナリをつけるという手法をとった。
やってみたところ以下のような結果に。
撮影ソース | Exif取得可能か |
---|---|
iPhone5s で撮影したデータ | OK |
iPhone6sPlus で撮影したデータ | OK |
iPhone12ProMax 高効率フォーマット(jpg) | NG Exifは消える |
iPhone12ProMax 互換性フォーマット(jpg) | Exifは残るがOrientationがライブラリ上で設定できない |
どの段階で消えてるの?
調査してみたところ input[type=file]
の段階でだめっぽい。
まず、前提条件としてどの段階で Exifが消えるか調査しようと以下
https://codepen.io/dameyellow/pen/abJyEoq
Codepenでつくって input[type=file]
で保持したファイルを FileReaderでBase64に変換してみた。
でてきた画像を長押しなどで保存してみる。
すると…
撮影ソース | Exif取得可能か |
---|---|
iPhone5s で撮影したデータ | OK |
iPhone6sPlus で撮影したデータ | OK |
iPhone12ProMax 高効率フォーマット(jpg) | NG Exifは消える |
iPhone12ProMax 互換性フォーマット(jpg) | Exifは残るがOrientationがおかしい |
となった。
おなじやん!
ならば、.heic自体をアップロードし、直でExif取得してきてライブラリで変換してやればええやん。
と考え、
<input type="file" accept=".heic">
で制限しようと思ったんですが、どうやらiPhoneだと勝手にjpgに書き換えられるっぽいです。
結果
それそのもの(Apple公式の回答など)があまり見つからないのですが、以下のような Stackoverflowは発見しました。
https://stackoverflow.com/questions/16297730/image-upload-from-iphone-strips-exif-data
ほかにはこんなスレッドが
https://news.ycombinator.com/item?id=23260987
ググりキーワードが悪いのかもしれませんので、どなたか…どうか…
これだ!ってページありましたら教えていただけると嬉しいです。