アップロードされた画像を正しい向きに変更する

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値に合わせて適切に回転補正をかけ、元の画像と同じ方向でサーバーに保存できるようになりました。

スポンサーリンク
スポンサーリンク
iconDecotter-blog-contents-2




iconDecotter-blog-contents-2




シェアする

フォローする

スポンサーリンク
iconDecotter-blog-contents-2