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

 

本文爲原創，轉載請註明出處： 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，這能夠從根本上解決問題。