如何解决IOS中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;
}
    

以上就是如何解决IOS中html5上传图片方向问题？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！