如何解決IOS中html5上傳圖片方向問題？

這篇文章主要介紹了IOS中html5上傳圖片方向問題解決方法的相關(guān)資料,需要的朋友可以參考下

用html5編寫圖片裁切上傳，在iphone手機(jī)上可能會(huì)遇到圖片方向錯(cuò)誤問題，在此把解決方法和大家分享一下，
用到了html5的 FileReader和Canvas，如果還沒有接觸的同學(xué)，先了解一下其方法。

 //此方法為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 回調(diào)方法，返回校正方向后的base64  function 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大小，確定旋轉(zhuǎn)角度，iphone默認(rèn)的是home鍵在右方的橫屏拍攝方式    switch(dir){      //iphone橫屏拍攝，此時(shí)home鍵在左側(cè)      case 3:        degree=180;        drawWidth=-width;        drawHeight=-height;        break;      //iphone豎屏拍攝，此時(shí)home鍵在下方(正常拿手機(jī)的方向)      case 6:        canvas.width=height;        canvas.height=width;         degree=90;        drawWidth=width;        drawHeight=-height;        break;      //iphone豎屏拍攝，此時(shí)home鍵在上方      case 8:        canvas.width=height;        canvas.height=width;         degree=270;        drawWidth=-width;        drawHeight=height;        break;    }    //使用canvas旋轉(zhuǎn)校正    context.rotate(degree*Math.PI/180);    context.drawImage(this,0,0,drawWidth,drawHeight);    //返回校正圖片    next(canvas.toDataURL("image/jpeg",.8));   }   image.src=img;  }