4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iPhoneの高効率フォーマット(HEIC)だとinput[type=file]でExifが読み取れない

Last updated at Posted at 2021-05-27

ざっくり結論

iOS の input[type=file] の仕様によりHeicファイルはExifが破棄される
jpegフォーマットの場合大丈夫な場合もある
そもそもiPhoneでheicファイルをブラウザ上からアップロードできない?

調査

(結構読まれたらスクショとかでわかりやすく更新します… :bow:)

前提 .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

ググりキーワードが悪いのかもしれませんので、どなたか…どうか…
これだ!ってページありましたら教えていただけると嬉しいです。

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?