iphone手机html5上传图片方向问题解决 - 前端笔记

用html5编写图片裁切上传，在iphone手机上可能会遇到图片方向错误问题，在此把解决方法和大家分享一下，
用到了html5的 FileReader和Canvas，如果还没有接触的同学，先了解一下其方法。

 //此方法为file input元素的change事件 function change(){    var file = this.files[0];    var orientation;    //EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js    EXIF.getData(file,function(){        orientation=EXIF.getTag(this,'Orientation');    });    var reader = new FileReader();    reader.onload = function(e) {           getImgData(this.result,orientation,function(data){//这里可以使用校正后的图片data了         });     }    reader.readAsDataURL(file);}

// @param {string} img 图片的base64// @param {int} dir exif获取的方向信息// @param {function} next 回调方法，返回校正方向后的base64function getImgData(img,dir,next){  var image=new Image();  image.onload=function(){    var degree=0,drawWidth,drawHeight,width,height;    drawWidth=this.naturalWidth;    drawHeight=this.naturalHeight;    //以下改变一下图片大小    var maxSide = Math.max(drawWidth, drawHeight);    if (maxSide > 1024) {        var minSide = Math.min(drawWidth, drawHeight);        minSide = minSide / maxSide * 1024;        maxSide = 1024;        if (drawWidth > drawHeight) {drawWidth = maxSide;drawHeight = minSide;        } else {drawWidth = minSide;drawHeight = maxSide;        }    }    var canvas=document.createElement('canvas');    canvas.width=width=drawWidth;    canvas.height=height=drawHeight;     var context=canvas.getContext('2d');    //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式    switch(dir){       //iphone横屏拍摄，此时home键在左侧        case 3:degree=180;drawWidth=-width;drawHeight=-height;break;        //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)        case 6:canvas.width=height;canvas.height=width; degree=90;drawWidth=width;drawHeight=-height;break;        //iphone竖屏拍摄，此时home键在上方        case 8:canvas.width=height;canvas.height=width; degree=270;drawWidth=-width;drawHeight=height;break;    }    //使用canvas旋转校正    context.rotate(degree*Math.PI/180);    context.drawImage(this,0,0,drawWidth,drawHeight);    //返回校正图片    next(canvas.toDataURL("image/jpeg",.8)); }  image.src=img;}