IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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

スマホで縦向きに撮影した写真(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で画像アップロード時に自動的に回転・リサイズさせる方法

1週間でLPICの基礎が学べる本 第2版

体系的に学ぶ 安全なWebアプリケーションの作り方[リフロー版] 脆弱性が生まれる原理と対策の実践

スッキリわかる SQL 入門 ドリル215問付き!

改訂 FuelPHP入門

はじめてのフレームワークとしてのFuelPHP 改訂版