スマホで撮影した写真を投稿しても正しく上を向かない場合にPHP側で変換する

スマホで撮影した写真を投稿したら、写真が横向きになっているということがあります。パソコンで写真を回転させても直りません。
なんでそうなるのかについて調べてみました。

現象はこんな感じです。

スマホで見ると以下のような写真も、投稿すると変な角度になります。

スマホで見ると正しく見えますが、
投稿すると角度がおかしくなっています。
パソコンで正しく回転させても直りません。

原因はexif情報とブラウザの関係

画像はどの部分が上になるのか?
画像データには表示した際に、上になるポジションを情報として持っています。

ややこしいのは、この情報が2つあることです。
(1)従来の画像データの物理的な回転角度の情報。
(2)exifと呼ばれる仮想回転情報です。

つまりスマホで撮影した場合、(1)の物理的な回転角度情報は縦置きですが、横にして撮影した場合、(2)の仮想回転情報が横置きとなります。

exifに対応しているスマホや、パソコンでは(2)の仮想回転情報に併せて表示されます。

しかし、多くのブラウザでは(2)の仮想回転情報には対応しておらず、(1)の物理回転情報をもとに表示されます。

そのために、スマホでは正しく表示されるのに、投稿すると角度がおかしくなるのです。

ちなみに、windows10で写真を表示する「フォト」で写真を回転させても、(2)の仮想回転情報を変更するだけなので効果がありません。
パソコンで回転させたのに直らないのはこのためです。

正しく表示するためには、(1)の物理回転情報を変更する必要があるのです。

PHPで投稿時のexif情報に合わせて物理回転させるプログラム

 この問題は投稿前に、photoshopなど(1)物理回転情報を変更できるソフトで正しく回転位置を合わせればよいのですが、標準画像ソフトだけでは対応がむつかしいのが現状です。

そこで、PHP側でexif情報(仮想回転情報)を読み取り、自動的に物理回転させるプログラムを組んでみました。
また参考になれば幸いです。

※本プログラムには、例外処理やチェック処理が含まれていません。参照される場合にはご留意願います。
※PHPでの画像編集処理はサーバーのメモリを食います。レンタルサーバーでメモリエラーが発生するようであれば、使用をお控えください。

ポイントは、exif情報(仮想情報)は8種類あり、それらに合わせて「imagerotate()」関数を使い物理回転をさせる点にあります。
物理回転情報を仮想回転情報と同じ状態にすることで、回転ずれを直しています。

いずれは全てのブラウザがexif情報に準じて表示するようになるとおもわれますが、プログラム側でも調整するようにすれば、より利用しやすいプログラムになります。

今回のレポートは以上です。
読んでいただいてありがとうございました。


Twitterでもweb集客向上、webマーケティング等についてブログの内容以外の情報発信もさせていただいております。Twitterもご覧いただければ幸いです。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。
微力ではございますが、鋭意ご対応申し上げます。

ホームページのご提案もさせていただいております