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

標籤：fileread   建立   ati   安卓   url   畫布   預覽   多少   size   

 

本文為原創，轉載請註明出處： 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頁面中拍照和上傳照片那些事兒（二）