这个问题是一直困扰着我, 一张图片, 用图片浏览器打开始终是竖图, 但是查看属性, 却发现宽大于高, 也就是在属性中这是个横图这样导致客户端用该宽高来展示图片会出现问题
今天查了一下资料, 原来是因为相机给图片的 exif 信息加上了一个 Orientation, 然后图片浏览器会对这个属性做出兼容, 让图片以竖图的形式显示出来
具体我是参考 https://www.cnblogs.com/csonezp/p/5564809.html 的
还有 https://www.jianshu.com/p/442b5ad217b8
首先要获取图片的 Orientation, 用 exif.js, 下载地址 http://code.ciaoca.com/javascript/exif-js/, 下载完成后引入
,
在调用这块会有需要注意的地方, 获取图片对象依靠官方文档的写法直接根据 img 标签对象就可以获取但是 lz 本人前期获取不正常, 所以就新建了 image 的对象去获取
var imageObj=new Image();
imageObj.src = 图片地址 (可以是 url, 也可以是本地 file);
通过监听 onload 方法, 执行 exif 的 getdata 方法:
- imageObj.onload=function(){
- EXIF.getData(imageObj,function(){})
- }
这里我用的是 lightbox.js 框架查看图片, 很方便, 网上可以查到.
然后要修改 lightbox.js 的源码, lightbox.js 的源码里面已经声明了一个 img, 所以用现成的,
然后在 preloader.onload 函数里, 根据获得的 Orientation 来旋转承载图片的容器, 怎么方便怎么来,
然后完美解决
很开心, 又解决了一个 bug......
来源: http://www.bubuko.com/infodetail-2525391.html