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