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

综合编程 简书

首先先放问题效果图

问题显示效果

这张图是用ios手机拍的,上传服务器获取到浏览器显示是上边的正常的效果,但是显示到img标签的时候就异常了。接下来百度排除模式,方法来来去去就是那么几种,今天就记录一下自己解决的过程,新手js渣到不行见谅。

首先网上资源基本上一致指向图片元数据中‘Orientation’这个值,iphone竖拍的时候会这个值会为6(也就是造成图片翻转90度的罪魁祸首)。要处理该问题首先要先确定‘Orientation’的值是多少。话不多说首先就是要获取这个数据,依靠exif.js (已连接超链接点击过去下载就好了 )。在调用这块会有需要注意的地方,获取图片对象依靠官方文档的写法直接根据img标签对象就可以获取但是lz本人前期获取不正常,所以就新建了image的对象去获取。

var imageObj=newImage();

imageObj.src=’图片地址(可以是url,也可以是本地file)’;

通过监听onload方法,执行exif的getdata方法:

imageObj.onload=function(){

EXIF.getData(imageObj,function(){})

}

这一块基本上是卡我比较长的时间,因为要么获取图片对象没反应,要么返回的值不对,其实最重要的就是这块在getdata的回调里边写就不会有问题,当时卡的是比较难受现在写笔记的时候感觉贼简单的一个逻辑。

下边就是解决代码了:

var Orientation=1;

var imageObj=newImage();

imageObj.src=’图片地址(可以是url,也可以是本地file)’;

imageObj.onload=function(){

varOrientation=1;

var cvs=document.createElement(‘canvas’);

var ctx=cvs.getContext(‘2d’);

var scale=1;//预留压缩比

var size=this.size;

cvs.width=this.width*scale;

cvs.height=this.height*scale;//计算等比缩小后图片宽高

EXIF.getData(imageObj,function() {

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

if(Orientation&&Orientation!=1){

switch(Orientation){

case6:// 旋转90度

/**

*这边主要是获取到要加载标签的宽和高,用来给画布设置大小,这里cvs是预支的画布,ctx是重画的图像。

*/

var fatherWidth=parseFloat($(‘.detailPhotoimg’).css(‘width’));

var fatherheight=parseFloat($(‘.detailPhotoimg’).css(‘height’));

scale=fatherWidth/this.width;

heightScale=fatherheight/this.height;

cvs.width=fatherWidth;

var x=this.height*scale/2;

//旋转后的画布需要img标签获取高度的2倍

cvs.height=fatherheight*2;

ctx.rotate(Math.PI/2);

// (0,-imgHeight) 从旋转原理图那里获得的起始点

ctx.drawImage(this,0,-this.height*scale-(fatherWidth/2-x),fatherWidth,fatherheight);

break;

case3:// 旋转180度

ctx.rotate(Math.PI);

ctx.drawImage(this,this.width*scale,-this.height*scale,this.width*scale,this.height*scale);

break;

case8:// 旋转-90度

cvs.width=this.height*scale;

cvs.height=this.width*scale;

ctx.rotate(3*Math.PI/2);

ctx.drawImage(this,-this.width*scale,0,this.width*scale,this.height*scale);

break;

}

}else{

ctx.drawImage(this,0,0,cvs.width,cvs.height);

}

var newImageData=cvs.toDataURL(this,1);

//重新定向加载url地址

$(‘.detailPhotoimg’).attr(‘src’,newImageData);

});

};

解决后的显示效果:

修改后的显示效果

好了,到这这个问题就记录完成了,程序bug是无时无刻不在诞生的,但是解决问题的套路基本一致的,检查查找原因分解问题,bug必然解决,另外对自己的要求要高一些就这样,有问题就留言吧。

简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合编程 » 关于HTML5显示图片翻转90度的问题

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录