Detailed use of exif.js to solve the iOS mobile phone upload photos rotated 90 degrees _javascript tips

Html5+canvas mobile phone photo upload, found that the iOS mobile phone upload photos will be rotated counterclockwise 90 degrees, horizontal shot without this problem, the Android phone is not the problem.

So the idea to solve this problem is to get to the orientation angle of the photo shoot, and to rotate the angle rotation of the iOS photos that are not sideways.

Using Exif.js to read the photo information, the main use of the orientation attribute.

The Orientation property description is as follows:

The following is directly on the code.

The main HTML5 page and a JS, sample features include image compression and rotation.

I wrote the uploadimage.js.

The HTML5 test page is as follows:

 <! DOCTYPE html> 
function Selectfileimage (fileobj) {var file = fileobj.files[' 0 ']; 
   
  Picture direction angle added by lzk var orientation = null; 
    if (file) {Console.log ("uploading, please later ..."); var rfilter =/^ (image\/jpeg|image\/png) $/i; 
      Check the picture format if (!rfilter.test (File.type)) {//showmytips ("Please select pictures in JPEG, PNG format," false); 
    Return }//var url = URL | | 
    Webkiturl; 
      Gets the photo Orientation angle property, the user rotates the control exif.getdata (file, function () {//Alert (Exif.pretty (this));  
      Exif.getalltags (this);  
      Alert (Exif.gettag (this, ' orientation ')); 
      Orientation = Exif.gettag (this, ' orientation '); 
    Return 
     
    }); 
    var oreader = new FileReader (); 
      Oreader.onload = function (e) {//var blob = url.createobjecturl (file); 
      _compress (blob, file, basepath); 
      var image = new Image (); 
      IMAGE.SRC = E.target.result; 
        Image.onload = function () {var expectwidth = this.naturalwidth; var expectheight = This.naturalheight; 
          if (This.naturalwidth > This.naturalheight && this.naturalwidth >) {expectwidth = 800; 
        Expectheight = Expectwidth * this.naturalheight/this.naturalwidth; else if (This.naturalheight > This.naturalwidth && this.naturalheight > 1200) {expectheight = 
          1200; 
        Expectwidth = Expectheight * this.naturalwidth/this.naturalheight; 
        var canvas = document.createelement ("Canvas"); 
        var ctx = Canvas.getcontext ("2d"); 
        Canvas.width = Expectwidth; 
        Canvas.height = Expectheight; 
        Ctx.drawimage (this, 0, 0, expectwidth, expectheight); 
        var base64 = null; 
          Repair iOS if (Navigator.userAgent.match (/iphone/i)) {console.log (' iphone '); 
          Alert (Expectwidth + ', ' + expectheight); If the orientation angle is not 1, you need to rotate added by Lzk if (orientation!= "" && orientation!= 1) {alert (' Rotate processing'); 
                Switch (orientation) {Case 6://requires a clockwise (left) 90-degree rotation alert (' clockwise (left) 90-degree rotation '); 
                Rotateimg (This, ' left ', canvas); 
              Break 
                Case 8://need to rotate alert (' Clockwise (right) 90-degree rotation ') counterclockwise (right) 90 degrees. 
                Rotateimg (this, ' right ', canvas); 
              Break 
                Case 3://need to rotate alert 180 degrees (' requires 180 degrees of rotation '); 
                Rotateimg (this, ' right ', canvas);/Turn two times rotateimg (this, ' right ', canvas); 
            Break 
          }/*var mpimg = new Megapiximage (image); Mpimg.render (canvas, {maxwidth:800, maxheight:1200, quality:0.8, O 
        Rientation:8}); */base64 = Canvas.todataurl ("Image/jpeg", 0.8); 
          }else if (Navigator.userAgent.match (/android/i)) {//fix Android var encoder = new Jpegencoder (); Base64 = Encoder.Encode (ctx.getimagedata (0, 0, Expectwidth, expectheight), 80); 
          }else{//alert (orientation); 
            if (Orientation!= "" && orientation!= 1) {//alert (' rotation processing '); 
                Switch (orientation) {Case 6://requires a clockwise (left) 90-degree rotation alert (' clockwise (left) 90-degree rotation '); 
                Rotateimg (This, ' left ', canvas); 
              Break 
                Case 8://need to rotate alert (' Clockwise (right) 90-degree rotation ') counterclockwise (right) 90 degrees. 
                Rotateimg (this, ' right ', canvas); 
              Break 
                Case 3://need to rotate alert 180 degrees (' requires 180 degrees of rotation '); 
                Rotateimg (this, ' right ', canvas);/Turn two times rotateimg (this, ' right ', canvas); 
            Break 
        } base64 = Canvas.todataurl ("Image/jpeg", 0.8); 
        }//uploadimage (base64); 
      $ ("#myImage"). attr ("src", base64); 
    }; 
    }; 
  Oreader.readasdataurl (file); //to the picture rotationRationale added by Lzk function Rotateimg (img, Direction,canvas) {//alert (IMG);  
    Minimum and maximum rotation direction, picture rotation 4 times back to the original direction var min_step = 0;  
    var max_step = 3;  
    var img = document.getElementById (PID);  
    if (img = null) return;  
    The height and width of img can not be acquired after the IMG element is hidden, otherwise it will error. var height = img.height;  
    var width = img.width;  
    var step = img.getattribute (' step ');  
    var step = 2;  
    if (step = null) {step = Min_step;  
      } if (direction = = ' right ') {step++;  
    Rotate to the original position, that is, the maximum value step > Max_step && (step = min_step);  
      else {step--;  
    Step < Min_step && (step = max_step);  
    }//img.setattribute (' Step ', step);  
    /*var canvas = document.getElementById (' pic_ ' + pid);  
      if (canvas = = null) {Img.style.display = ' none ';  
      Canvas = document.createelement (' canvas ');  
      Canvas.setattribute (' id ', ' pic_ ' + pid);  
    Img.parentNode.appendChild (canvas); }*///rotation angle in radians value as parameter var degree = step * math.pi/180;  
    var ctx = Canvas.getcontext (' 2d ');  
        Switch (step) {Case 0:canvas.width = width;  
        Canvas.height = height;  
        Ctx.drawimage (IMG, 0, 0);  
      Break  
        Case 1:canvas.width = height;  
        Canvas.height = width;  
        Ctx.rotate (degree);  
        Ctx.drawimage (IMG, 0,-height);  
      Break  
        Case 2:canvas.width = width;  
        Canvas.height = height;  
        Ctx.rotate (degree);  
        Ctx.drawimage (IMG,-width,-height);  
      Break  
        Case 3:canvas.width = height;  
        Canvas.height = width;  
        Ctx.rotate (degree);  
        Ctx.drawimage (IMG,-width, 0);  
    Break  
 }  
  }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.