[WordPress] スマホで縦向き撮影した写真が勝手に横向く(回転する)問題

  • 公開日:2018/7/21
  • 最終更新日:2019/5/31

スマホで縦向きに撮影した写真(JPEG画像)をWordPressにアップロードしたら、勝手に回転して横向きになっているっ!ということがあります。しかも、ブラウザによってはちゃんと縦向きだったりするから気持ち悪い。

勝手に回転してしまう理由

そもそもなぜ縦向きの写真が横向きになってしまうのか?

スマホで撮影した写真にはExif情報(エグジフ情報またはイグジフ情報)と呼ばれる情報が保存されています。例えば、撮影したカメラやスマホの種類、焦点距離、F値などの設定値、GPSが有効な機種であれば撮影場所の情報等です。そこに写真の向きも含まれます。それがOrientation属性です。

iOSや特定の端末では縦向きで撮影した写真でも横向きを基本として、このExif情報のOrientation属性で写真の向きを調整して保存しています。したがって、Exif情報の読み取りに対応していないビューワーやブラウザで見ると勝手に回転してしまったように見えるというわけです。

Orientationに応じて画像を回転して保存する

wp_handle_uploadをフックしてアップロード時に処理するようにします。

Orientationの定義

処理する前に、Orientationの定義を確かめておきます。

Orientationどう補正すれば正しい向きになるか
1そのまま
2上下反転
3180度回転
4左右反転
5上下反転、時計周りに270度回転
6時計周りに90度回転
7上下反転、時計周りに90度回転
8時計周りに270度回転

参考: JPEGのExifタグ情報のOrientaionの定義の早見表

Orientationによって、どう処理するのか?

Orientationが3、6、8の場合に画像を回転して保存します。というわけで、functions.phpに以下を記述します。

function my_photo_upload($file) { 
    if ($file['type'] == 'image/jpeg') { 
        $image = wp_get_image_editor($file['file']); 
        if (!is_wp_error($image)) { 
            $exif = exif_read_data($file['file']); 
            $orientation = $exif['Orientation']; 
            if (!empty($orientation)) { 
                switch ($orientation) { 
                    case 8: 
                        $image->rotate(90); 
                        break; 
                    case 3: 
                        $image->rotate(180); 
                        break; 
                    case 6: 
                        $image->rotate(-90); 
                        break; 
                } 
            } 
            $image->save($file['file']); 
        } 
    } 
return $file; 
} 
add_action('wp_handle_upload', 'my_photo_upload');

これで解決できました。

参考サイト:
ブログに写真を投稿したら、向きが変わる時の対処法
WordPressで画像アップロード時に自動的に回転・リサイズさせる方法