Solution for mobile image upload, rotation and compression

Preface

When taking pictures and uploading pictures through the input tag of the web page on a mobile phone, some mobile phones will have the problem of the picture being rotated 90 degrees, including iPhone and individual Samsung mobile phones. This problem only occurs when these phones are taken vertically, and photos taken horizontally display normally. Therefore, you can solve this problem by getting the camera angle of your phone to rotate the photo.

Orientation

This parameter is not available in all pictures, but pictures taken by mobile phones have this parameter.

##0°1##90° clockwise##90° counterclockwise8180°3The display is normal when the parameter is 1, then the display is normal in these horizontal shots, That is, on a mobile phone with Orientation = 1, the vertical shooting parameter is 6.

Rotation angle	Parameter value
6

If you want to obtain the Orientation parameter, you can operate it through the exif.js library. exif.js has many functions and is large in size. It is 30k before uncompressed, which has a great impact on mobile page loading. And I only need to get the Orientation information, so I deleted some code from the exif.js library and reduced the code to a few KB.

exif.js Get Orientation:

EXIF.getData(file, function() {  var Orientation = EXIF.getTag(this, 'Orientation');});

file is the file uploaded by the input file form. The uploaded file can be previewed through fileReader.readAsDataURL(file). If you are unclear about this, you can check: HTML5 Advanced Series: File Upload and Download

Rotation

Rotation needs to be used The rotate() method of canvas.

ctx.rotate(angle);

The parameter of the rotate method is the rotation arc. The angle needs to be converted into radians: degrees * Math.PI / 180

The center point of rotation is at the starting point of the canvas by default, that is (0, 0). The principle of rotation is as follows:

After rotation, if drawImage() is performed from the (0, 0) point, the drawn position will be rotated 90 in the left picture The position behind it is not in the visible area. After the rotation, the coordinate axis also rotates. If you want to display it in the visible area, you need to move the (0, 0) point y units in the opposite direction of the y-axis. The starting point at this time is (0, -y ).

In the same way, the starting point after rotating -90 degrees is (-x, 0), and the starting point after rotating 180 degrees is (-x, -y).

Compression

The photos taken by mobile phones are too large, and the photos encoded using base64 will be larger than the original photos, so it is very necessary to compress them when uploading. Today's mobile phones have such high pixels, and the width and height of the photos taken are several thousand pixels. Using canvas to render the photos will be relatively slow.

Therefore, the first step is to limit the width and height of the uploaded photo, determine whether the width or height exceeds the range, and then compress the width and height in equal proportions.

var ratio = width / height;if(imgWidth > imgHeight && imgWidth > xx){imgWidth = xx;imgHeight = Math.ceil(xx / ratio);}else if(imgWidth < imgHeight && imgHeight > yy){imgWidth = Math.ceil(yy * ratio);imgHeight = yy;}

The second step is to compress the photo quality through the canvas.toDataURL() method.

canvas.toDataURL("image/jpeg", 1);

The toDataURL() method returns a data URI containing the image display. Use two parameters, the first parameter is the image format, the default is image/png. The second parameter is the compression quality. When the specified image format is image/jpeg or image/webp, you can select the image quality from 0 to 1.

Summary

Based on the above, the example code includes the streamlined exif.js library address: file-demo

The main core code is as follows:

<input type="file" id="files" ><img  src="/static/imghw/default1.png"  data-src="blank.gif"  class="lazy"   id="preview" alt="Solution for mobile image upload, rotation and compression" >
<script src="small-exif.js?1.1.11"></script><script>var ipt = document.getElementById(&#39;files&#39;),img = document.getElementById(&#39;preview&#39;),Orientation = null;ipt.onchange = function () {var file = ipt.files[0],reader = new FileReader(),image = new Image();if(file){EXIF.getData(file, function() {  
            Orientation = EXIF.getTag(this, &#39;Orientation&#39;);});
            reader.onload = function (ev) {image.src = ev.target.result;
            image.onload = function () {var imgWidth = this.width,imgHeight = this.height;
            // 控制上传图片的宽高if(imgWidth > imgHeight && imgWidth > 750){imgWidth = 750;
            imgHeight = Math.ceil(750 * this.height / this.width);
            }else if(imgWidth < imgHeight && imgHeight > 1334){imgWidth = Math.ceil(1334 * this.width / this.height);
            imgHeight = 1334;
            }var canvas = document.createElement("canvas"),ctx = canvas.getContext(&#39;2d&#39;);
            canvas.width = imgWidth;canvas.height = imgHeight;
            if(Orientation && Orientation != 1){switch(Orientation){case 6:     
            // 旋转90度canvas.width = imgHeight;    canvas.height = imgWidth;    
            ctx.rotate(Math.PI / 2);
            // (0,-imgHeight) 从Solution for mobile image upload, rotation and compression那里获得的起始点ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
            break;case 3:     // 旋转180度ctx.rotate(Math.PI);    
            ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);break;case 8:     
            // 旋转-90度canvas.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);}img.src = canvas.toDataURL("image/jpeg", 0.8);
            }}reader.readAsDataURL(file);
            }}</script>

The above is the detailed content of Solution for mobile image upload, rotation and compression. For more information, please follow other related articles on the PHP Chinese website!