iPhoneやiPadで撮った写真（縦）をCANVASへdrawimageすると、勝手に回転する現象

「input file="type"」でiPhoneやiPadで写真を撮らせてCANVASへ貼り付けると何故か勝手に横向いてる・・・。
という現象があったので、解決方法です。

まず前提として、iPhoneで撮った写真は縦位置だろうが横位置だろうが、横幅の画像として保存されます。
でも、イメージビューワやブラウザ上でIMGタグで貼り付けた状態で見ると正しく縦位置で表示されます。
何故かと言うと、EXIF情報に画像の回転に対する情報が記述されており、
ビューワー等はそれを読み取って自動的に回転させて表示してくれてるわけです。

ですが、CMS等でサーバで処理したりCANVASへ持ってきたりすると、
EXIF情報が失われたりして横向きに表示されてしまいます。

そんな時、PHPでファイルを一時保存しているのであればできる解決方法です。

$image = ImageCreateFromJPEG($filepath);  //保存した画像を複製
$exif = exif_read_data($filepath);    //画像のEXIF情報取得

if( isset($exif['Orientation']) ){
 $orientation = $exif['Orientation'];
 switch($orientation) {
   case 0:#未定義
      break;
   case 1:#通常
      break;
   case 2:#左右反転
      image_flop($image);
      break;
   case 3:#180°回転
      image_rotate($image,180, 0);
      break;
   case 4:#上下反転
      image_Flip($image);
      break;
   case 5:#反時計回りに90°回転 上下反転
      image_rotate($image,270, 0);
      image_flip($image);
      break;
   case 6:#時計回りに90°回転
      image_rotate($image,90, 0);
      break;
   case 7:#時計回りに90°回転 上下反転
      image_rotate($image,90, 0);
      image_flip($image);
      break;
   case 8:#反時計回りに90°回転
      image_rotate($image,270, 0);
      break;
 }
 ImageJPEG($image ,$filepath);
}

まず「exif_read_data($filepath)」で、EXIF情報を読み込みます。
（$filepathは相対パスで記述。URLからの絶対パスは不可みたいです）

次に「$exif['Orientation']」で、回転情報を取得します。
Orientationの数値に対して、それぞれの回転や左右反転を設定していきます。
（読み込んでいるfunctionについては下記を参照
　http://www.glic.co.jp/blog/archives/88）

最後に「ImageJPEG($image ,$filepath)」で画像を上書き保存して終了です。
（保存先を変えれば複製画像を保存できます。）


これをJSでやろうと思うと「Javascript Load Image」ってプラグインを使えばいいみたいです。
http://am-yu.net/2014/04/11/load-image-js/
https://github.com/blueimp/JavaScript-Load-Image


（参考）
http://blog.diginnovation.com/archives/1104/