透過CKEditor或Summernote上傳iphone拍的圖片顯示被轉向問題

Bootstrap的RWD設計很方便，不過開發狀況上要考慮的點就挺多的，客戶反映說手機上圖時顯示是反的，但是圖下載下來是正的，乍聽之下挺神奇的不是事實卻是如此。

爬文得知在iphone手機拍攝照片時，會取決於拍照按鈕位置來存檔，所以在圖片的Orientation的狀態上就可能是旋轉的，不過在PC檢視上通常會自動轉回來可是瀏覽器就...參考網誌

另外因為手機的鏡頭跟效能越來越強，所以照片的解析度SIZE變超大，看起來是很舒服不過在WEB應用上就挺占頻寬的，簡單的壓縮功能就一併去實現囉。

//圖檔壓縮與旋轉
function image_resize($targetFile){
if (file_exists($targetFile)){
$img_array = getimagesize($targetFile);
$isResize = false;
$ratio = 512;
if ($img_array[0] > $ratio){
$config['width'] = $ratio;
$height = $img_array[1] / ($img_array[0] / $ratio);
$config['height'] = intval($height);
$isResize = true;
} else if ($img_array[1] > $ratio){
$config['height'] = $ratio;
$width = $img_array[0] / ($img_array[1] / $ratio);
$config['width'] = intval($width);
$isResize = true;
}
if ($isResize){
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
$config['source_image'] = $targetFile;
$config['maintain_ratio'] = TRUE;

//because iphone photo maybe save rotation by sensor
$exif = @exif_read_data($targetFile);
if(!empty($exif['Orientation'])) {
switch($exif['Orientation']) {
  case 8:
   $config['rotation_angle'] = '90';
   break;
  case 3:
   $config['rotation_angle'] = '180';
   break;
  case 6:
   $config['rotation_angle'] = '270';
   break;
}
$this->image_lib->initialize($config);
$this->image_lib->rotate();
}
$config['rotation_angle'] = '0';
$this->image_lib->initialize($config);
$this->image_lib->resize();
}

return true;
} else {
return false;
}

}