Fix picture orientation problem when iOS h5 upload map

iOS uploads will take a orientation attribute in Exif, which will not take effect in windows and will take effect in iOS browser, resulting in inconsistent orientation of the picture in the iOS browser in Windows Explorer for user experience, You need to straighten the picture into a normal picture. Need to use an EXIF plugin address https://github.com/exif-js/exif-js/code

function Check_file (files) {//School Acceptance Collection form data//var formdata = new Formdata ();         if(!files[0] || !/image\/\w+/.test (files[0].type)) {$.hidepreloader (); $('. Li_imgs'). Children ('. IMGs'). Last (). Children (). First (). Removeattr ('Disabled'); _deny_request=false; return; }         //formdata.append ("ImgFile0", Files[0]); //handling iOS Camera orientationExif.getdata (files[0],function () {Orientation= Exif.gettag ( This,'Orientation');          }); varReader =NewFileReader (); Reader.readasdataurl (files[0]); Reader.onload=function (e) {getimgdata (e); }          return;}//e-Base64 of picturesfunction Getimgdata (e) {varImage =NewImage (); IMAGE.SRC=E.target.result; Image.onload=function () {varExpectwidth = This. Naturalwidth; varExpectheight = This. Naturalheight; if( This. naturalwidth > This. Naturalheight && This. naturalwidth > -) {Expectwidth= -; Expectheight= Expectwidth * This. Naturalheight/ This. Naturalwidth; } Else if( This. naturalheight > This. Naturalwidth && This. naturalheight > -) {Expectheight= -; Expectwidth= Expectheight * This. Naturalwidth/ This. Naturalheight; }      varCanvas = document.createelement ("Canvas"); varCTX = Canvas.getcontext ("2d"); Canvas.width=Expectwidth; Canvas.height=Expectheight; Ctx.drawimage ( This,0,0, Expectwidth, expectheight); varBase64 =NULL; //fix iOS            Switch(Orientation) { Case 6://need to rotate clockwise (left) 90 degreesRotateimg ( This,' Left', canvas);  Break;  Case 8://need to rotate counterclockwise (right) 90 degreesRotateimg ( This,' Right', canvas);  Break;  Case 3://requires 180 degree rotationRotateimg ( This,' Right', canvas);//Turn two timesRotateimg ( This,' Right', canvas);  Break; } base64= Canvas.todataurl ("Image/jpeg",0.7). SUBSTRING ( A);Here to deal with the Base64 code header, so that PHP Base64_decode can parse, compress a piece, otherwise it will be 413 error

displayimg (base64); }}//Rotate picture Processingfunction Rotateimg (img, direction,canvas) {//alert (IMG); //The minimum and maximum rotation direction, the picture rotates 4 times and then returns to the original direction        varMin_step =0; varMax_step =3; //var img = document.getElementById (PID);         if(img = =NULL)return; //the height and width of the IMG cannot be obtained after the IMG element is hidden, otherwise an error occurs        varHeight =Img.height; varwidth =Img.width; //var step = img.getattribute (' step ');         varStep =2; if(Step = =NULL) {Step=Min_step; }            if(Direction = =' Right') {Step++; //rotate to the original position, which exceeds the maximum valueStep > Max_step && (step =min_step); } Else{Step--; Step< Min_step && (step =max_step); }            //rotation angle is the parameter of the Radian value        vardegree = Step * -* Math.PI/ the; varCTX = 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; }    }  /** * Android/ios image upload*/function displayimg (imgBinaryContentbase64) {remove_file_input ($ ('. Li_imgs'). Children ('. IMGs'). Last (). Children (). First ());//Delete the old file field$.showpreloader (_up_img_msg); vardata = {}; if(_isiosdev) {data['iOS'] =imgBinaryContentbase64; }Else{data['content'] =imgBinaryContentbase64; } $.ajax ({type:'Post', URL:'? c=bzymgr/washcar&a=uploadandroidimg&openid=<?php echo $this->openid;? >', Data:data, DataType:"JSON",      Async:true, Success:function (res) {if(res=='0') {Public_toast ('upload failed, please try again later', +); return; }          varHTML ="';  for(varIinchRes) {HTML+='<div class= "IMGs" >\"' +res[i]+ '" class="thumb_img"/>                           <bclass="Img_cancel"onclick="remove_img (This)">X</b>                    </div>';              //Store to Localstorageadd_imgs_localstorage (Res[i]); }          //Insert Dom$('. Li_imgs'). Children ('. IMGs'). Last (). before (HTML);                  SetTimeout (function () {$.hidepreloader (); _deny_request=false; }, +); }, Error:function () {Public_toast ('The server ran away, please try again later', -); },   });}

Fix picture orientation problem when iOS h5 upload map