Practice | solution for image upload, rotation and compression on mobile terminal

author ｜ Lin Xin

original text ｜http://imweb.io/topic/59559c01ad7fa941029740aa

Preface

On the mobile phone through the web input Take photos and upload pictures , There are some mobile phones that will rotate the picture 90 The problem of degree , Include iPhone And some Samsung mobile phones . This problem only occurs when these mobile phones shoot vertically , The photos taken horizontally will display normally . therefore , You can rotate the photos by obtaining the camera angle of the mobile phone , To solve this problem .

Orientation

Not all images have this parameter , But the picture taken by the mobile phone has this parameter .

Rotation Angle	Parameter values
0°	1
Clockwise 90°	6
Anti-clockwise 90°	8
180°	3

Parameter is 1 When it shows normal , So in these horizontal strokes, the display is normal , namely Orientation = 1 On my cell phone , The parameters of the vertical beat are 6.

Want to get Orientation Parameters , Can pass exif.js Library to operate .exif.js A lot of function , Very big , There is enough before compression 30k, This has a great impact on mobile page loading . And I just need to get Orientation Information only , So I have deleted exif.js Some code of the library , Reduce the code to a few KB.

exif.js obtain Orientation ：

file It is input File form uploaded file . The uploaded file goes through fileReader.readAsDataURL(file) You can preview the picture , If you are not clear about this aspect, you can check ：HTML5 Advanced Series ： File upload download （https://github.com/lin-xin/blog/issues/19）

rotate

Rotation requires canvas Of rotate() Method .

rotate The parameter of the method is the rotation arc . You need to convert the angle to radians ：degrees * Math.PI / 180

By default, the rotation center points are all in canvas The starting point of the , namely ( 0, 0 ). The principle of rotation is shown in the figure below ：

After spinning , If from ( 0, 0 ) Point proceed drawImage(), Then the position drawn is the rotation in the left figure 90 Position after degrees , Not in the visible area . After spinning , The axis also rotates , Want to display in the visible area , Need to put ( 0, 0 ) Point to y The shaft moves in the opposite direction y A unit of , The starting point is ( 0, -y ).

Empathy , You can obtain rotation -90 The starting point after degrees is ( -x, 0 ), rotate 180 The starting point after degrees is ( -x, -y ).

Compress

The photos taken by the mobile phone are too big , And use base64 The encoded photo will be larger than the original photo , So it is very necessary to compress when uploading . Today's mobile phones are so high in pixels , The width and height of the photos are thousands of pixels , use canvas Rendering this picture will be relatively slow .

Therefore, the first step is to limit the width and height of the uploaded photos , Determine whether the width or height is out of which range , Then compress its width and height in equal proportion .

The second step is to pass canvas.toDataURL() Method to compress photo quality .

toDataURL() Method returns a data URI . Use two parameters , The first parameter is the image format , The default is image/png. The second parameter is the compression quality , In the specified picture format image/jpeg or image/webp Under the circumstances , It can be downloaded from 0 To 1 The quality of selected pictures in the range of .

summary

Above all , The code of the example includes a simplified exif.js The base address ：file-demo（https://github.com/lin-xin/blog/tree/master/file-demo）

The main core codes are as follows ：

Scan the QR code below the code ,

Follow more front-end dry goods articles at any time ！

▼

WeChat ：IMWebTech