提醒：本文最後更新於 2522 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

隨著智慧手機的普及，大家已經習慣隨手拍點照片傳網上了。有時候傳上去的照片方向會不對，甚至還有腦袋朝下的情況。為此，各大微博不約而同的給照片增加左右旋轉的功能。這樣能解決問題，但我們是否能更進一步，自動選擇正確的照片方向呢？剛好最近我們有類似的場景，本文就討論下這個問題。

實際上，數碼裝置拍攝照片時，會把許多屬性附加在照片檔案裡，這些屬性構成了大家常說的 Exif 資訊。訪問我的相簿會發現照片下也有對應的 Exif 資訊。Exif 中有個 Orientation 欄位，用來存放照片方向，這就是我們需要的，看下它的定義：

NOTE: Values with "*" are uncommon since they represent "flipped" orientations. via

當然，Exif 中的 Orientation 屬性，取決於拍照的裝置是否擁有方向感測器。不過根據我的瞭解，目前大部分數碼拍照裝置都支援記錄方向。1 是預設值，2、4、5、7 表示照片進行了翻轉。一般情況下，取值應該是 1、3、6、8 中的一種。下面有張更形象的圖描述了具體的旋轉策略：

如何從圖片中獲取 Exif 資訊，各個語言都有封裝好的程式碼可以直接使用。Javascript 也不例外，國外某同學 08 年就釋出了可用程式碼。他的做法分為兩步，首先通過 Ajax 獲取原始二進位制，這在 firefox 和 webkit 比較好辦，在 IE 下需要藉助 VBScript 的幫忙；第二步是從原始資料不同位置獲取相關資訊，基本是體力活了。想深入瞭解的同學可以點本段幾個連結圍觀下。

從圖片 Exif 資訊中取到 Orientation 後，就可以根據它來自動旋轉圖片了，canvas、filter 濾鏡、vml、css3 都可以實現圖片的旋轉。網上也有很多封裝好的程式碼可以直接拿過來用。

綜合上文，我寫了一個 demo，除了 Opera，相容大部分其它瀏覽器（在 Opera11.6 下測試過，也是 OK 的）。

另外，如果用 FileReader Api 獲取圖片的原始二進位制，就可以在瀏覽器本地實現圖片自動旋轉。這在圖片上傳前預覽時比較有用，這裡有 demo。

PS：其實，大部分的圖片檢視客戶端早已支援自動旋轉，所以一般情況下數碼裝置拍的照片用電腦看，方向都是正確的。許多縮圖生成程式，也是可以指定縮放前自動旋轉的（例如 ImageMagick 的 -auto-orient 引數）。

再 PS：純前端獲取圖片 Exif，只是一種嘗試。如果需要頻繁使用 Exif 資訊，還是後端獲取完，存在資料庫比較靠譜。

參考：

--EOF--

提醒：本文最後更新於 2522 天前，文中所描述的資訊可能已發生改變，請謹慎使用。