Fix picture orientation problem when iOS h5 upload map

Source: Internet
Author: User
Tags openid

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.