旅游网站管理系统,财务软件有哪些,校友会网站建设方案,著名网站设计公司本文目录结构IOS 垂直拍照的时候会遇到#xff0c;PC 端读取的时候#xff0c;逆时针旋转了 90 度的问题#xff1b;安卓、PS 处理的#xff0c;相册选择截图等不会出现这个问题#xff1b;场景说明#xff1a;这个图片在浏览器里#xff0c;如果您单独打开的时候#…本文目录结构IOS 垂直拍照的时候会遇到PC 端读取的时候逆时针旋转了 90 度的问题安卓、PS 处理的相册选择截图等不会出现这个问题场景说明这个图片在浏览器里如果您单独打开的时候是垂直显示的但是包裹在 IMG 标签内就会逆时针旋转了如上图这种情况下因为 window 系统看图不支持方向自动识别所以看到的还是正常垂直的在微信中看到的也是没问题的(手机中用 lrz 处理过)原理分析可以通过exif-js这个插件来获取图片信息GitHub 地址https://github.com/exif-js/exif-jsAPI 文档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(Orientation6){//// console.log(这张图片是IOS垂直拍的);//image-orientation: from-image$fileImg.css({image-orientation:from-image});}});});注意“Orientation”这个属性IOS 垂直拍出来的照片Orientation是 6安卓手机拍出来是 1PS 截图等处理后的照片会自动舍弃该属性如果您获取的话会是undefined可以通过 CSS 来解决比如火狐浏览器有一个新属性的image-orientation 可通过 CanIuse 来看兼容性http://caniuse.com/#featcss-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-orientationDEMOhttp://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(Orientation6){// 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 中看到的如下图
