首先先放问题效果图
问题显示效果这张图是用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必然解决，另外对自己的要求要高一些就这样，有问题就留言吧。