HTML5 upload Picture direction problem solution in IOS _ios

Use HTML5 to write pictures to cut the upload, on the iphone may encounter picture Direction error problem, this solution to share with you,
Using the HTML5 FileReader and canvas, if you have not contacted the classmate, first understand its method.

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

@param {string} img Base64//@param {int} dir exif gets the direction information//@param {function} Next callback method, returns the Base64 function g after the correction direction
 Etimgdata (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 the size of the picture 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 '); To determine the direction of the picture, reset 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 shooting, at this time the home key in the left case 3:degree=1
      80;
      Drawwidth=-width; DrawhEight=-height;
    Break
      iphone vertical screen shooting, at this time the home button 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 shooting, at this time the home button in the upper case 8:canvas.width=height; 
      Canvas.height=width;
      degree=270;
      Drawwidth=-width;
      Drawheight=height;
  Break
  ///Use 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;
 }