In this paper, delete Jane since: www.zhangxinxu.com/wordpress/?…

1. Functional experience

First look at demo: Use Canvas to compress images on the front end and upload demo

Here is the screenshot:

Click the file selection box, we might as well choose a larger size of the picture, such as the following fishing photo more than 2M:

So the picture was circulated:

At this time, we click on the final uploaded image address, we will find that the original 2M more than 3000 pixels wide image is limited to 400 pixels wide:

If you save it locally, you will find that the image size has changed to only 70K:

This is the full demo of the image front end compression and upload demo.

Two, the realization principle

The core API is to use the drawImage() method of canvas. Canvas is essentially a bitmap, and the drawImage() method can be used to draw a large image on a small Canvas.

For this case of compression, use the 5 parameters of the API method:

context.drawImage(img, dx, dy, dWidth, dHeight);Copy the code

For the specific meanings of each parameter, see Canvas API Chinese Document -drawImage, which is not expanded here. For example, the original size of an image (let’s say the image object is IMG) is 4000*3000. Now you need to limit the size to 400*300.

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d'); canvas.width = 400; canvas.height = 300; DrawImage (img,0,0,400,300);Copy the code

Drawing a large picture on a small canvas, compression is achieved, is not a little easy to imagine.

3. If you want to upload or download?

If you want to upload or download an image, you can use the Canvas.todataURL () or Canvas.toblob () methods to convert the image first.

1. canvas.toDataURL()
The syntax is as follows:

canvas.toDataURL(mimeType, qualityArgument)Copy the code

Canvas can be converted to base64 format information image information, pure character picture representation.

MimeType indicates the type of canvas exported base64 image. The default is PNG, i.e. the default value is ‘image/ PNG ‘. We can also specify JPG, ‘image/ JPEG ‘or webp. File. type in the file object is the mimeType of the file, which can be used directly during the conversion (if there is a file object). QualityArgument indicates the quality of the exported image. This parameter is valid only when the exported image is in JPG or WebP format. The default value is 0.92, which is a reasonable output parameter of the image quality. For more information about the toDataURL() method, see Canvas API Chinese Documentation -toDataURL().

2. Canvas. ToBlob () method
The syntax is as follows:

canvas.toBlob(callback, mimeType, qualityArgument)Copy the code

You can convert the canvas to a Blob file, which is usually used in file uploads because it is binary and more back-end friendly.

The toBlob() method is asynchronous compared to the toDataURL() method, so it has an additional callback argument. The first parameter of this callback method is the converted blob file information by default. The file upload in the demo case at the beginning of this article is to convert the Canvas image into a binary BLOB file, and then upload it with Ajax. The code is as follows:

// convert canvas toBlob and upload canvas. ToBlob (function(blob) {var XHR = new XMLHttpRequest(); // Start uploading xhr.open("POST".'upload.php'.true);
  xhr.send(blob);    
});Copy the code

For more information about the toBlob() method, see Canvas API Chinese Documentation -toBlob(). Once you have transmittable image data, you can upload and download it. For example, to download front end compressed images, refer to my previous post in Nuggets: “Pure JS generates and downloads various text files or images.”

Four,

After “picture → Canvas compression → picture” three steps, we completed the picture front compression function.

Above, thanks for reading!