IOS Web page picture upload problem

Write a picture with HTML5 to cut the upload, on the iphone may encounter picture direction error problems, here to solve the problem and share with you,
Use the HTML5 FileReader and canvas, if you have not contacted the classmate, first understand the method.

This method is the Change event function change () of the file INPUT element () {  var file = this.files[0];  var orientation;  EXIF JS can read the meta-information of the picture 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) {      //) The corrected image data can be used here     });   }  Reader.readasdataurl (file);}

@param {string} img Picture of base64//@param {int} dir exif gets the direction information//@param {function} Next callback method, returns the correction direction after the Base64function Getim  GData (img,dir,next) {var image=new image (); Image.onload=function () {var degree=0,drawwidth,drawheight,width,height;  Drawwidth=this.naturalwidth;  Drawheight=this.naturalheight;  The following changes a piece of size var maxside = Math.max (DrawWidth, drawheight);    if (Maxside > 1024x768) {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 ');      Judging the direction of the picture, resetting the canvas size, determine the rotation angle, the iphone default is the home button on the right side of the horizontal screen shooting mode switch (dir) {//iphone horizontal screen shot, at this time the home key on the left case 3:degree=180;      Drawwidth=-width;      Drawheight=-height;    Break IPhONE vertical screen shooting, at this time home key in the bottom (normal take the direction of the phone) case 6:canvas.width=height;       Canvas.height=width;      degree=90;      Drawwidth=width;      Drawheight=-height;    Break      iphone vertical screen shot, at this time home key in case 8:canvas.width=height;       Canvas.height=width;      degree=270;      Drawwidth=-width;      Drawheight=height;  Break  }//using the canvas rotation correction context.rotate (degree*math.pi/180);  Context.drawimage (This,0,0,drawwidth,drawheight); Returns the corrected picture next (Canvas.todataurl ("Image/jpeg",. 8)); } image.src=img;}

IOS Web page picture upload problem