本文為原創，轉載請註明出處： cnzt 文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/6895352.html

本文主要說下iOS上傳的照片在安卓機上翻轉的問題。

問題：蘋果機豎著拍個照片，上傳到server，再在安卓手機打開，發現圖片翻轉了呵呵噠……

原因：蘋果手機默認的方向是水平且home鍵向右的方向，所有豎著拍照相當於順時針轉了90度，恩。所以到安卓手機上翻了90度。

解決方法：

1. 前端js解決

　　利用canvas和exif.js（用於讀取圖片的exit信息，如orientation）達到目的。

　　思路：

　　html -- input(type=file)輸入框，用於上傳圖片的

　　js -- 用FileReader讀取file文件，將結果用於新建一個圖片Image的src，圖片加載完成後創建一個canvas，根據圖片大小設置canvas的寬高，將圖片畫到canvas畫布上。用exif.js讀取圖片的orientation相機的方向信息（1-8），根據方向決定canvas畫布需要轉多少度，最後將旋轉後的canvas轉化成dataurl賦值給dom預覽。

　　orientation參考這裏。

　　弊端：這樣只能改變本地預覽的圖片方向，如果是直接向server發送file文件作為request data，則此方法不能達到目的。

2. server端解決

　　server端拿到圖片後處理orientation，這可以從根本上解決問題。

html頁面中拍照和上傳照片那些事兒（二）