iconDecotterには、自分のデコレーション前アイコンをファイルアップロードで変更できるようなフォームがあります。
しかし、スマートフォンで撮影した画像をアップロードすると、天地がおかしくなることがあるようでした。
原因は、ExifのOrientationを解釈せずに画像を受け取って更新しているからでした。
画像(写真)の方向の定義とは
PHP – アップロードした写真(画像)が回転して表示されるのを直す方法 – Qiita
まさに原因はこれでした。
Exifは、JPEG画像やTIFF画像などに埋め込まれている、その画像のいろいろな情報なのですが、その中に「この画像はどの方向を向いて表示します」という指定が入っていたりします。
実はスマートフォン撮影した画像のデータ自体は常にカメラに対して一定方向になっていて、画像を表示するときにこの指定を表示するアプリケーション側が判断して表示しているのです。
例えば、縦向きの写真も、本当はJPEG画像のデータ配列としては横向きなんだけど、表示するときに「縦向きですよ」という情報を解釈して、縦向きに表示しているということです。
というわけで、アップロードするユーザーが縦向きのものと思って送ったデータの方向指定情報を気にせずサーバーに保存したりすると、そこで向きが変わってしまうわけです。
(本来のデータ配列の方向とこの方向指定が合致している場合は、変化しませんが。)
画像(写真)の方向を取得して正しい向きに加工する
Orientationの値は以下のように取得します。
//fileタイプのinputの、imageというnameで送信されてきた画像ファイルのExif $exif = exif_read_data($_FILES["image"]["tmp_name"], 0, true); //このうち、Orientationを出力 //IFD0配列内にOrientationがある echo $exif["IFD0"]["Orientation"];
その値によってどう処理したらよいかについては、こちらを参考にさせていただきました。
JPEGのExifタグ情報のOrientaionの定義の早見表 · DQNEO起業日記
Orientationの値 | 補正方法 |
---|---|
1 | 補正しない |
2 | 上下反転 |
3 | 180度回転 |
4 | 左右反転 |
5 | 上下反転+時計周りに270度回転 |
6 | 時計周りに90度回転 |
7 | 上下反転+時計周りに90度回転 |
8 | 時計周りに270度回転 |
この対処に従って、回転と反転を使って、方向を合わせてあげる必要があるわけです。
最初の記事だとImage Magickを利用していますが、GDライブラリでもそれぞれ関数があるので、
Orientationの数値に合わせて適切な処理をするようにします。
回転 imagerotate
反転 imageflip
なおimageflipはGDライブラリのバージョンによっては使用出来なかったりするので、
下記の手法を参考にしました。
iphoneで撮った写真の方向をphpで補正する方法 | 富山のホームページ製作会社・グリーク スタッフブログ
アップロードされた画像をOrientation値に合わせて適切に回転補正をかけ、元の画像と同じ方向でサーバーに保存できるようになりました。
コメント