iOS and phone photos uploaded, display rotation on web side

( ′? ?? Now the company AH are popular mixed development, our company is no exception, do not want to interact with a lot of community module with embedded Web page to show, well, after all, some applications are doing so, since it is the community will certainly not be the user upload pictures of the operation, in the development stage did not find any problems, is also very strange, Wait until the test phase, found that some models and iOS models after taking pictures, the Web page to get the path after the picture and picture files are not the correct direction, rotated 90°, 180°, so go online to find the reason, the result is ...

Pictures larger than 2M! And it's a picture of the vertical shoot! The Orientation property of the picture will be rewritten when the photo is generated!!! So some of the models and iOS will appear rotation problem!

Damn it!

Of course, the method also Baidu to, but most are only put the code, and did not explain, in fact, understand is very simple.

First, install the plug-in ︶^︶

The first thing to solve this problem is to use plug-in, because our front-end rotation of the picture just on the page looks rotated, and did not solve the fundamental problem, so we need to use the Exif.js tool.

Https://www.npmjs.com/package/exif-js

A powerful tool to read the image data, the installation is also very simple document also has, not much to say, because I use the Vue, so between NPM installed after the need to use the page introduced:

Import exif from "Exif-js";

Even if you complete the installation of the plug-in here;

Second, start! (^-^) V

First, we call the Exif method directly in the change event of the selection box.

Let Orientation = 0; Exif.getdata (e.target.files[function() {    exif.getalltags (  this);  = Exif.gettag (This, ' Orientation ');}); // E.target.files[0] To get the first picture file, if it is multiple picture files can be traversed

At this point we have acquired the orientation attribute of the image, which is the orientation attribute of the picture, and the different values represent different orientations:

Picture Normal	1
Picture facing right	6
Picture facing left	8
Picture Upside down	3

Later after the test orientation will have a value, that is, 0, when orientation equals 0 when the picture is normal, but 0 represents the meaning, has not been found.

So now we can work on the picture. Let canvas = document.createelement ("canvas");

Let ctx= Canvas.getcontext ("2d"); let width=Img.width;let Height=Img.height;Switch(orientation) { Case0: //do not do any processing direct drawingCanvas.width =width; Canvas.height=height; Ctx.drawimage (IMG,0, 0)  Break;  Case1: //do not do any processing direct drawingCanvas.width =width; Canvas.height=height; Ctx.drawimage (IMG,0, 0)  Break;  Case6: //picture rotated clockwise 90 °Canvas.height =width; Canvas.width=height; Ctx.rotate (Math.PI/2); Ctx.translate (0,-height); Ctx.drawimage (IMG,0, 0)  Break;  Case3: //picture rotation 180 °Canvas.height =height; Canvas.width=width;        Ctx.rotate (Math.PI); Ctx.translate (-width,-height); Ctx.drawimage (IMG,0, 0)  Break;  Case8: //picture counterclockwise rotation 90 °Canvas.height =width; Canvas.width=height; Ctx.rotate (-math.pi/2); Ctx.translate (-height, 0); Ctx.drawimage (IMG,0, 0)  Break;  Caseundefined://direct drawing without any processingCanvas.width =width; Canvas.height=height; Ctx.drawimage (IMG,0, 0)  Break; } 

Let Ndata=canvas.todataurl ("Image/jpeg", 1);

Here the image of the processing is to put the picture in the canvas of the whole painting, and then turn it into the right direction, then the thumbnail can be directly displayed ndata on it.

But here is just a picture, we can not send the background image base64 code in the past, must be a picture file to be able to, then this will be used to Base64 transcoding.

The first is the encapsulation of the Base64 transcoding function:

    //base64 turn into Bolb objectDatauritoblob (base64data) {let byteString; if(Base64data.split (",") [0].indexof ("base64") >= 0) byteString= Atob (Base64data.split (",") [1]); ElsebyteString = unescape (Base64data.split (",") [1]); Let Mimestring=base64data. Split (",") [0]. Split (":") [1]. Split (";") [0]; Let IA=NewUint8array (bytestring.length);  for(Let i = 0; i < bytestring.length; i++) {Ia[i]=bytestring.charcodeat (i); } return NewBlob ([ia], {type:mimestring}); },

Then we can convert the above ndata through Base64 to the picture file.

// call the conversion function to convert the Base64 code into a picture file  This . Datauritoblob (ndata); // keep the new file name consistent with the original picture file blob.name = e.target.files[0].name; // put the new file in the array of files we need to pass to the background this. Files.push (BLOB);

Third, End O (? Д?) Our store

The above is the processing of the image rotation, very simple, we can be understood as the picture redraw. Of course, the above method is only a single image conversion, if the user uploads a number of images at the same time, then in the corresponding place to add a traversal loop on it.

If there is a shortage of places to be expected to add, there is a wrong place also ask everyone to criticize correct.

If you don't understand it, you can discuss it through my contact form.