码迷,mamicode.com
首页 > Web开发 > 详细

关于HTML5显示图片翻转90度的问题

时间:2018-03-12 21:06:29      阅读:417      评论:0      收藏:0      [点我收藏+]

标签:htbox   file   nbsp   开心   alt   png   on()   htm   需要   

这个问题是一直困扰着我,一张图片,用图片浏览器打开始终是竖图,但是查看属性,却发现宽大于高,也就是在属性中这是个横图。这样导致客户端用该宽高来展示图片会出现问题。

今天查了一下资料,原来是因为相机给图片的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......

 

关于HTML5显示图片翻转90度的问题

标签:htbox   file   nbsp   开心   alt   png   on()   htm   需要   

原文地址:https://www.cnblogs.com/ningxiaofang/p/8550839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!