本文目录结构

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 中看到的如下图