JS Gets the angle attribute of the photo shot for rotation control

In the iOS phone upload vertical photo will automatically rotate 90 degrees, and shooting angle is different, so need to deal with:

1, using Exif.js can get to the photo shooting properties: API method

name	Description
Exif.getdata (IMG, callback)	Get the data for an image Can be compatible with browsers that have not yet supported EXIF data to obtain metadata.
Exif.gettag (IMG, tag)	Get a data for an image
Exif.getalltags (IMG)	Gets all the data for the image, and the value is returned as an object
Exif.pretty (IMG)	Gets all the data for the image, and the value is returned as a string

             function() {                //alert (Exif.gettag (this, ' Orientation '));                  Orientation = Exif.gettag (This, ' Orientation '//                            });

Where orientation is the angle of the shooting information; Additional parameter information can be viewed: http://code.ciaoca.com/javascript/exif-js/

Note: Here my files are getting the file format of the picture, Files[0] get.

The Orientation property is described below:

Rotation angle	Parameters
0°	1
Clockwise 90°	6
90° counterclockwise	8
180°	3

2. Determine how many angles the photo needs to rotate and rotate it with the canvas:

//fix iOS                            if(Navigator.userAgent.match (/iphone/i)) {varIMG =NewImage (); IMG.SRC=resimg.src; Img.onload=function(){                                    varCanvas=document.createelement ("Canvas"); varCtx=canvas.getcontext ("2d"); varImgWidth = Canvas.width = This. Width; varImgHeight = Canvas.height = This. Height; //if the direction angle is not 1, you need to rotate added by Lzk                                    if(Orientation && Orientation! = 1){                                        Switch(Orientation) { Case6://Rotate 90 degreesCanvas.width = This. Height; Canvas.height= This. Width; Ctx.rotate (Math.PI/2); //(0,-imgheight) starting point obtained from the rotation schematicCtx.drawimage ( This, 0,-imgheight, ImgWidth, imgheight);  Break;  Case3://Rotate 180 degreesctx.rotate (Math.PI); Ctx.drawimage ( This,-imgwidth,-imgheight, ImgWidth, imgheight);  Break;  Case8://rotation-90 degreesCanvas.width =ImgHeight; Canvas.height=ImgWidth; Ctx.rotate (3 * MATH.PI/2); Ctx.drawimage ( This,-imgwidth, 0, ImgWidth, imgheight);  Break; }                                    }Else{ctx.drawimage ( This, 0, 0, ImgWidth, imgheight); }                                    varBase64code=canvas.todataurl ("Image/png", 1); $ (resimg). attr ("SRC", Base64code); var$blob =basetoblobimg (Base64code); if($ (_self). attr (' id ') = = ' Hiddenserverid ') {chooseimglist[0].serverimg = $blob//Receive BLOB                                                                        }Else{chooseimglist[1].serverimg = $blob//Receive BLOB                                    } }                                                            }Else{                                //non-Apple phone compression post-upload                                varBase64code =resimg.src; var$blob =basetoblobimg (Base64code); if($ (_self). attr (' id ') = = ' Hiddenserverid ') {chooseimglist[0].serverimg = $blob//Receive BLOB                                                                }Else{chooseimglist[1].serverimg = $blob//Receive BLOB                                }                            }

3. Convert the processed image to the bold type file upload:

 /*   convert base64 pictures to blod format upload  */ function   Basetoblobimg (base64code) { var  arr = base64code.split (', '), MIME = arr[0 ].match (/:(. *?);/) [1], BSTR  = Atob (Arr[1 = Bstr.length, U8arr  = new   Uint8array (n);  while  (N-- = Bstr.charcodeat (n);  return  obj = new   Blob ([U8arr], {type:mime}); }  

Can learn from Csdn Lin Ke's post: Using Exif.js to solve the iOS phone upload vertical photo rotation 90 degrees problem

JS Gets the angle attribute of the photo shot for rotation control