画像操作の時にスマホ縦画像が回転して保存されてしまう問題を解説【CodeIgniter4】

この記事は2023/07/31に作成されました。

CodeIgniter4には、画像操作に関して便利なヘルパーやライブラリが提供されています。画像をアップロード後にリサイズと切り抜きを行おうとしたときに、操作する元画像によって閲覧しているときの画像状態から90度回転している等、画像の角度に関する問題が起きてしまいました。調べたところ、この原因は元画像のEXIF情報(orientation)にあることが分かりました。今回はこの問題について解説していきます。

EXIFとは？

EXIF（Exchangeable Image File Format）は、デジタル画像に付加されるメタデータの一つです。カメラやスマートフォンなどで撮影された画像ファイルには、その画像に関するさまざまな情報が含まれています。これらの情報は、EXIFフォーマットを使って画像ファイルに埋め込まれ、画像を処理したり、表示したりする際に利用されます。その中でも今回影響する"orientation"は、画像が撮影された際のカメラの向きや画像の回転情報を示すフィールドです。どのように回転補正すれば正しく補正できるのかが値として格納されています。orientationの値は、数値で表され（1から8までの整数）、一般的な値は次のようになります

1: そのまま

3: 180度回転

6: 時計回りに90度回転

8: 時計回りに270度回転

デバイスやソフトウェアは、こちらのorientationフィールドを使用して、画像を正しい向きで表示することができています。CIで画像操作後に画像を保存する際に、EXIF情報を取り除かれているようです。その結果、orientationの値が欠落してしまい、画像の向きが適切に補正されなかったことが原因です。

必要に応じてorientationの値を修正する方法について

1.EXIF情報を読み取る

PHPには、EXIF情報を読み取るためにexif_read_data()関数が用意されています。この関数を使用して画像ファイルからEXIF情報を取得できます。

// 画像ファイルのパス
$imageFilePath = 'path/to/image.jpg';

// EXIF情報の読み取り
$exifData = exif_read_data($imageFilePath);

// もしorientationの値が含まれている場合、その値を取得
if (isset($exifData['Orientation'])) {
    $orientation = $exifData['Orientation'];
    // ここでorientationの値を使用した処理を行う
}

2.orientationの値から角度を補正する

orientationの値によってそれぞれ角度を補正する
1: そのまま
3: 180度回転しているので、180度回転させる
6: 反時計周りに90度回転しているので、反時計回りに270度回転させる
8: 時計周りに90度回転しているので、反時計回りに90度回転させる

// 画像ファイルのパス
$imageFilePath = 'path/to/image.jpg';

// EXIF情報の読み取り
$exifData = exif_read_data($imageFilePath);
// 画像の向きに応じて回転する角度を決定
$degree = 0;
// もしorientationの値が含まれている場合、その値を取得
if (isset($exifData['Orientation'])) {
    $orientation = $exifData['Orientation'];
    // ここでorientationの値を使用した処理を行う
    switch ($orientation) {
        //180度回転しているので、反時計回りに180度回転させる
        case 3:
          $degree = 180;
          break;
        //反時計周りに90度回転しているので、反時計回りに270度回転させる
        case 6:
          $degree = 270;
          break;
        //時計周りに90度回転しているので、反時計回りに90度回転させる
        case 8:
          $degree = 90;
          break;
      }
}

$imageSavePath = 'path/save/image_change.jpg';
//リサイズと角度補正
$result = \Config\Services::image()
            ->withFile($dir . $name)
            ->resize($width, 0, true, 'width')//リサイズ
            ->rotate($degree)//角度補正
            ->save($path);

この手順で角度を補正してあげれば期待した角度での画像操作,保存を行うことが可能です。

まとめ

EXIF情報利用してソフトウェアが自動的にユーザーが使いやすいような修正を加えてくれています。今回のように編集ソフトウェアやシステムを通すとEXIF情報が変更されたりするので注意して制作を行いましょう。以上です、ありがとうございました。

Designed by Pch.vector - Freepik.com