圖片上傳服務(wù)器后被自動旋轉(zhuǎn)

關(guān)鍵詞：圖片旋轉(zhuǎn)，EXIF，前端
原文：http://makaiqian.com/exif-orientation/

前端上傳圖像到后臺時，有時候會發(fā)現(xiàn)圖像旋轉(zhuǎn)了。比如這張圖：
后臺服務(wù)器顯示情況

但在我的電腦上預(yù)覽和顯示是這樣子的：
本地顯示是這樣子

一開始以為是前端代碼的問題，其實并不是。這里要引入 EXIF的概念。

EXIF

EXIF（Exchangeable Image File）是“可交換圖像文件”的縮寫，當(dāng)中包含了專門為數(shù)碼相機的照片而定制的元數(shù)據(jù)，可以記錄數(shù)碼照片的拍攝參數(shù)、縮略圖及其他屬性信息。

圖像一旦被修改，Exif 信息可能會永久丟失，故編輯 Exif 必須使用專門的軟件。

可以理解成，用來記錄照片屬性和拍攝數(shù)據(jù)的。（可以附加于jpeg等文件中，但png圖片中不會有。）
EXIF中，有一個 Orientation 參數(shù)，用于記錄照片生成時的方向。 一共有8個值，分別是：1、2、3、4、5、6、7、8。

正常情況下，拍照只會出現(xiàn)是1、6、3、8這幾個值。2、5、4、7相當(dāng)于鏡像，照像時不會出現(xiàn)這幾種情況。1、6、3、8的效果分別是：

  • 1：0度（比如正常情況下我是這樣拍攝的）
    拍攝角度

  • 6：逆時針90度回到正常
    旋轉(zhuǎn)回正常角度

  • 3: 180度回到正常
    順/逆時針180都能回到正常

  • 8：順時針90度回到正常
    順時針90度回到正常

Mac上為什么會是正常的呢？

Mac之所以會顯示正常，是因為Mac的圖片“預(yù)覽”功能會自動根據(jù)Orientation參數(shù)處理照片方向。但實際上，照片是旋轉(zhuǎn)的。

用Mac的預(yù)覽的 工具 - 顯示檢查器 查看旋轉(zhuǎn)信息：

Preview 查看旋轉(zhuǎn)信息

這里可以看到方向是6（逆時針旋轉(zhuǎn)90度將回到正常）.
順帶說一下，可以看到好多EXIF參數(shù)信息（我是用pad拍的）：
圖像EXIF信息

Windows平臺上呢？

windows上默認的圖片預(yù)覽工具沒有做處理，如果拍攝的時候是旋轉(zhuǎn)的，那顯示的也是旋轉(zhuǎn)的。

在Mac上怎么轉(zhuǎn)回來？

  1. 用Mac的“預(yù)覽”功能打開，再Command + S保存，參數(shù)就改變了，上傳的圖片就正了。
    Orientation參數(shù)就從6（逆時針旋轉(zhuǎn)90度回到正常）變?yōu)榱?（正常）
  2. 利用專業(yè)的修改EXIF的工具

關(guān)于前端獲取EXIF

有一個框架可以讀取圖像的原始數(shù)據(jù)：Exif.js。IE10以下不兼容。
demo效果：http://code.ciaoca.com/javascript/exif-js/demo/
github地址：https://github.com/jseidelin/exif-js/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容