iPhoneのsafariで写真撮影画像と撮影した画像をアップロードする方法調査 20180602

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ずいぶん昔ですが、iPhoneのsafariブラウザで入力フォームの「input type=’file’」を使って撮影した画像をアップロードできるようになりました。
・・・が、実はあまりこの機能を使っておらず、普通にアップロードできるだろうとたかをくくっていたところ、いくつかの問題が発生していたので、それらの対処方法を書いておきます。

iPhoneのsafariブラウザのファイル(写真)アップロード問題点

1. 画像が回転してしまう。
2. 撮影した画像はアップロードできるが、フォトライブラリの画像をアップロードしようとすると、何故かファイルが正常にアップロードできない。
3. 撮影画像アップロードと、フォトライブラリアップロードは、ファイルの拡張子が変わる(2018.6.2現在 , iOS11.3.1)

この機能を使った事がある人であれば、どれもネットで検索すれば対応方法は出てきますが、何故かまとまったやり方が書かれていなかったので、まとめて対応したいと思います。
※ただし、対応方法はそれぞれ別々です。

1. 画像が回転してしまう事象の対応方法

画像が回転してしまう原因は、EXIF情報を取得して、正確にorientation値を反映しなければいけません。
EXIFが何かわからない人は、下記のリンクを参照ください。
 

https://ja.wikipedia.org/wiki/Exchangeable_image_file_format
 

簡単に言うと、撮影した画像(jpeg)ファイルに書き込まれている情報の事です。
 

この情報を取り出すには、ライブラリを使うのが簡単です。
 

exifというjavascriptのライブラリですが、下記のGithubから、「exif.js」だけをダウンロードして使うのがいいでしょう。
ライセンスも「MIT」と書かれているので、全く問題ありません。
 

https://github.com/exif-js/exif-js
 

そして、下記のようなjavascriptのコードを記述する事で、exif情報が取得できます。
※途中省いてますが、取れる情報はなんとなくわかると思います。
 

 

結果

本番はこれからで、”Orientation”という値がポイントで、以下の表のような構成になっています。

内容
1 そのまま
2 上下反転
3 180度回転
4 左右反転
5 上下反転、時計周りに270度回転
6 時計周りに90度回転
7 上下反転、時計周りに90度回転
8 時計周りに270度回転

 

http://dqn.sakusakutto.jp/2009/02/jpegexiforientaion.html

3番、6番、8番に対応すれば、だいたい問題ないでしょう。
 

そして、canvas画像では、以下のような判定で行なってみました。
 

 

長いですが、この手の関数を作っておくと便利でしょうね。

2. 撮影した画像はアップロードできるが、フォトライブラリの画像をアップロードしようとすると、何故かファイルが正常にアップロードできない。

PC(Mac)のChromeブラウザでは、正常に動いていたので安心していたんですが、iPhoneのsafariブラウザでアップロードできないという事象に焦りました。
これは、入力フォームタグの属性に問題がありました。
基本的に画像アップロードするためには、PCでもスマホでも以下のように書くようにすると、正常に動作するでしょう。
 

 

formタグのenctypeとtype=”file”の”image/*”が重要なようです。ビデオをアップロードしたい場合は、”video/*”とするらしいですよ。

3. 撮影画像アップロードと、フォトライブラリアップロードは、ファイルの拡張子が変わる(2018.6.2現在 , iOS11.3.1)

これは不思議でしょうがなかったんですが、現バージョンでは、撮影画像は、拡張し「jpg」で、フォトライブラリの画像は「jpeg」でした。
 

受け側のサーバー(PHPなど)で、どちらの拡張子でも、大文字小文字でも対応できるようにしておけばいいと思います。
 

めんどくさい人は、受診時に、複数ばらけてしまう拡張子をまとめてjpg一つに変換してしまうと楽かもしれませんね。
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です