圖片Exif 信息中Orientation的理解和對此的處理

這個問題是在用七牛上傳圖片後獲取寬高時發現的，一張圖片，用圖片瀏覽器打開始終是豎圖，可是查看屬性或者用七牛獲取寬高，卻發現寬大於高，也就是在屬性中這是個橫圖。這樣致使客戶端用該寬高來展現圖片會出現問題。

下面有個例子，能夠參考：

1，圖片地址是：http://7xt44n.com2.z0.glb.qiniucdn.com/exif.png

打開能夠看到是豎圖。

 

2，用七牛的api將全部額外信息去除，再看來這張圖片：http://7xt44n.com2.z0.glb.qiniucdn.com/exif.png?imageMogr2/strip

你會發現這圖自己實際上是個橫圖。

 

 

本人對於圖形學徹底沒有研究，在諮詢了一位圖形學博士後獲得了答案，原來是由於相機給圖片的exif信息加上了一個Orientation，而後圖片瀏覽器會對這個屬性作出兼容，讓圖片以豎圖的形式顯示出來。下面我來對Orientation這個屬性作一些解釋。

 

EXIF Orientation 參數讓你隨便照像但均可以看到正確方向的照片而無需手動旋轉，這個參數有如下幾個值：

EXIF Orientation Value	Row #0 is:	Column #0 is:
1	Top	Left side
2	Top	Right side
3	Bottom	Right side
4	Bottom	Left side
5	Left side	Top
6	Right side	Top
7	Right side	Bottom
8	Left side	Bottom

 

說實話這個表實在太難看懂了，即便是它變成中文：

參數	0行（未旋轉上）	0列（未旋轉左）	旋轉（方法不少）
1	上	左	0°
2	上	右	水平翻轉
3	下	右	180°
4	下	左	垂直翻轉
5	左	上	順時針90°+水平翻轉
6	右	上	順時針90°
7	右	下	順時針90°+垂直翻轉
8	左	下	逆時針90°

 

滿眼的上下左右真是看的眼花。網上流傳的還有一張圖示：

 

這張圖裏的數字 對應的就是表格裏的數字。我來看着這個圖用我本身的理解給你們解釋一下，可能不標準，可是能助於你理解這個參數：

 

表格裏的0行，你能夠理解爲你看到的旋轉後（加上參數，被瀏覽器自動旋轉）的圖片的上方向，0列你能夠理解爲你看到的旋轉後的圖片的左方。而表格裏沒一行的數據，就是該方向對應的原來的圖片的方向。

 

好比參數值1,0行是上，0列是左，意思也就是旋轉後的上方是原圖的上方，旋轉後的左方是原圖的左方；

參數值2,0行是上，0列是右，那就是旋轉後的上方是原圖的上方，旋轉後的左方是原圖的右方；

參數值8,0行是左，0列是下，那就是旋轉後的上方是原圖的左方，旋轉後的左方是原圖的下方；

 

這三個例子，配合着圖片和表格，多看即使，總能理解這個參數的意思的。

 

下面要講講個人處理辦法了。其實在移動端，圖片庫都會對這個參數作出兼容的，你只須要保證你的寬高不倒置，移動端就能夠正常顯示。因此個人處理辦法就是圖片上傳完畢後，調用七牛的exif接口，獲取exif信息，而後對Orientation進行判斷，若是這個圖片是一個90°旋轉的圖，那就把寬高手動換一下，就能夠了。