您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页关于HTML5显示图片翻转90度的问题

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

来源:二三娱乐

首先先放问题效果图

问题显示效果

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

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必然解决,另外对自己的要求要高一些就这样,有问题就留言吧。

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务