本文目錄結構

IOS 垂直拍照的時候會遇到，PC 端讀取的時候，逆時針旋轉了 90 度的問題；

安卓、PS 處理的，相冊選擇截圖等不會出現這個問題；

場景說明：

這個圖片在瀏覽器里，如果您單獨打開的時候，是垂直顯示的；

但是包裹在 IMG 標簽內就會逆時針旋轉了；

如上圖；

這種情況下，因為 window 系統看圖不支持方向自動識別，所以看到的還是正常垂直的；

在微信中，看到的也是沒問題的(手機中用 lrz 處理過)

原理分析：

可以通過exif-js這個插件來獲取圖片信息；

GitHub 地址：https://github.com/exif-js/exif-js

API 文檔：http://code.ciaoca.com/javascript/exif-js/$fileImg.load(function(){

// console.log("加載完成！");

var Orientation;

EXIF.getData($fileImg[0], function() {

Orientation = EXIF.getTag(this, "Orientation");

console.log("拍照Orientation值是：",Orientation);

if(Orientation===6){//

// console.log("這張圖片是IOS垂直拍的");

//image-orientation: from-image

$fileImg.css({"image-orientation":"from-image"});

}

});

});

注意“Orientation”這個屬性，IOS 垂直拍出來的照片，Orientation是 6；安卓手機拍出來是 1；PS 截圖等處理后的照片會自動舍棄該屬性，如果您獲取的話，會是undefined；

可以通過 CSS 來解決；

比如火狐瀏覽器有一個新屬性的：image-orientation ；

可通過 CanIuse 來看兼容性：http://caniuse.com/#feat=css-image-orientation

可以通過設置：image-orientation: from-image;這個屬性讓圖片正常顯示；

但是 Chrome 等瀏覽器并不支持；

Mozilla 官網的介紹：https://developer.mozilla.org/zh-CN/docs/Web/CSS/image-orientation

網上了下，也有類似的問題：https://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation

DEMO：http://jsfiddle.net/7j5xJ/

國內的相關文章：http://www.jianshu.com/p/ad4501db178e

最終我的處理方式$fileImg.load(function(){

// console.log("加載完成！");

var Orientation;

EXIF.getData($fileImg[0], function() {

Orientation = EXIF.getTag(this, "Orientation");

// console.log("拍照Orientation值是：",Orientation);

if(Orientation===6){

// console.log("這張圖片是IOS垂直拍的");

//image-orientation: from-image;

// $fileImg.css({"image-orientation":"from-image"});

$fileImg.css({

"transform":"rotate(90deg)",

"transform-origin":"0 0",

"marginLeft":"270px",

"paddingBottom":"80px",

"height":"auto",

"width":"360px"

});

}

});

});

因為image-orientation 這個屬性就火狐和safari支持，主流chrome也不支持，所以就徹底不用這個屬性；

通過變換角度并想右移動圖片的 HTML 中高度；

因為上面和下面可能會有文字，所以通過padding-bottom微調下；

注意這種情況下，不能設置max-width 這個屬性；

PC 中看到的如下圖

總結

以上是生活随笔為你收集整理的ios 图片逆时针旋转_iphone-IOS 竖直拍照被旋转，image-orientation 让图片自动旋转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。