スマホで撮った写真を正しい方向に補正するphp

iPhoneで撮った写真をアップロードするときにExif情報を読み取って正しい方向に補正するphp

iPhoneはExif情報を判別して一覧表示している
exif.jsで向きを取得する
補正するfunction
受信時に向きを補正

php関連記事

iPhoneはExif情報を判別して一覧表示している

iPhone上では正しく表示されるのにアップロードすると右向きだったり左だったりあっちこっち向いてる現象の対策。
画像には撮影された時の向き「Exif情報」が保存されていて、iPhone上でこの向きを統一し、表示しているのでスマホの動作確認するまで気づかなかった。
phpで処理するにはExif情報を画像から読み取り、向きを補正する必要がある。
今回はアップロードしてからトリミングする場合。

exif.jsで向きを取得する

https://github.com/exif-js/exif-jsからダウンロードして読み込む。
送信時に向きを直すので送信ボタンが押されたタイミングでexif.jsで向きを取得、hiddenの値に設定し、送信する。

html

<input type="hidden" id="orientation" name="orientation" value="0">

EXIF.getData(file, function () {
  $('#orientation').val(EXIF.getTag(this, "Orientation"));
});

補正するfunction

補正function

// 画像の左右反転
function image_flop($image){
  // 画像の幅を取得
  $w = imagesx($image);
  // 画像の高さを取得
  $h = imagesy($image);
  // 変換後の画像の生成（元の画像と同じサイズ）
  $destImage = @imagecreatetruecolor($w,$h);
  // 逆側から色を取得
  for($i=($w-1);$i>=0;$i--){
    for($j=0;$j<$h;$j++){
      $color_index = imagecolorat($image,$i,$j);
      $colors = imagecolorsforindex($image,$color_index);
      imagesetpixel($destImage,abs($i-$w+1),$j,imagecolorallocate($destImage,$colors["red"],$colors["green"],$colors["blue"]));
    }
  }
  return $destImage;
}


// 上下反転
function image_flip($image){
  // 画像の幅を取得
  $w = imagesx($image);
  // 画像の高さを取得
  $h = imagesy($image);
  // 変換後の画像の生成（元の画像と同じサイズ）
  $destImage = @imagecreatetruecolor($w,$h);
  // 逆側から色を取得
  for($i=0;$i<$w;$i++){
    for($j=($h-1);$j>=0;$j--){
      $color_index = imagecolorat($image,$i,$j);
      $colors = imagecolorsforindex($image,$color_index);
      imagesetpixel($destImage,$i,abs($j-$h+1),imagecolorallocate($destImage,$colors["red"],$colors["green"],$colors["blue"]));
    }
  }
  return $destImage;
}


// 画像を回転
function image_rotate($image, $angle, $bgd_color){
  $destImage = imagerotate($image, $angle, $bgd_color, 0);
  return $destImage;
}

受信時に向きを補正

受信php

$orientation = $_POST['orientation'];
if(isset($orientation)){

  list($w, $h, $type) = getimagesize($url);

  switch($type){
    case IMAGETYPE_JPEG:
      $image = imagecreatefromjpeg($url);
      break;
    case IMAGETYPE_GIF:
      $image = imagecreatefromgif($url);
      break;
    case IMAGETYPE_PNG:
      $image = imagecreatefrompng($url);
      break;
  }

  
  if($image){
    // 未定義
    if($orientation == 0){
      $image2 = "";
    // 通常
    }else if($orientation == 1){
      $image2 = "";
    // 左右反転
    }else if($orientation == 2){
      $image2 = image_flop($image);
    // 180°回転
    }else if($orientation == 3){
      $image2 = image_rotate($image,180, 0);
    // 上下反転
    }else if($orientation == 4){
      $image2 = image_Flip($image);
    // 反時計回りに90°回転 上下反転
    }else if($orientation == 5){
      $image2 = image_rotate($image,90, 0);
      $image2 = image_flip($image2);
    // 時計回りに90°回転
    }else if($orientation == 6){
      $image2 = image_rotate($image,270, 0);
    // 時計回りに90°回転 上下反転
    }else if($orientation == 7){
      $image2 = image_rotate($image,270, 0);
      $image2 = image_flip($image2);
    // 反時計回りに90°回転
    }else if($orientation == 8){
      $image2 = image_rotate($image,90, 0);
    }


    imagedestroy($image);

    if($image2){
      // 画像の書き出し
      switch($type){
        case IMAGETYPE_JPEG:
          imagejpeg($image2, UP_PATH_FACE.$picturename);
          break;
        case IMAGETYPE_GIF:
          imagegif($image2, UP_PATH_FACE.$picturename);
          break;
        case IMAGETYPE_PNG:
          imagepng($image2, UP_PATH_FACE.$picturename);
          break;
      }
      imagedestroy($image2);
    }

  }
}