[WordPress] スマホで縦向き撮影した写真が勝手に横向く(回転する)問題
- 公開日:2018/7/21
この記事は最終更新日から5年以上が経過しています。
スマホで縦向きに撮影した写真(JPEG画像)をWordPressにアップロードしたら、勝手に回転して横向きになっているっ!ということがあります。しかも、ブラウザによってはちゃんと縦向きだったりするから気持ち悪い。
勝手に回転してしまう理由
そもそもなぜ縦向きの写真が横向きになってしまうのか?
スマホで撮影した写真にはExif情報(エグジフ情報またはイグジフ情報)と呼ばれる情報が保存されています。例えば、撮影したカメラやスマホの種類、焦点距離、F値などの設定値、GPSが有効な機種であれば撮影場所の情報等です。そこに写真の向きも含まれます。それがOrientation属性です。
iOSや特定の端末では縦向きで撮影した写真でも横向きを基本として、このExif情報のOrientation属性で写真の向きを調整して保存しています。したがって、Exif情報の読み取りに対応していないビューワーやブラウザで見ると勝手に回転してしまったように見えるというわけです。
Orientationに応じて画像を回転して保存する
wp_handle_upload
をフックしてアップロード時に処理するようにします。
Orientationの定義
処理する前に、Orientationの定義を確かめておきます。
Orientation | どう補正すれば正しい向きになるか |
---|---|
1 | そのまま |
2 | 上下反転 |
3 | 180度回転 |
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で画像アップロード時に自動的に回転・リサイズさせる方法