Sample Code for Canvas and image compression,

Sample Code for Canvas and image compression,

I have previously written an article on Canvas image processing. Today we will talk about how to use Canvas to compress images.

Canvas image compression process

Next, I will explain the specific process of Canvas image compression with examples.

I. Local Image Input

1. Get local files

<!--HTML--><input type="file" id="choose-img" />

// JSvar chooseImg = document. getElementById ("choose-img"); chooseImg. onchange = function (e) {var file = this. files [0]; //… (Omitted part of the code will be displayed in sequence, the same below )};

It is easy to obtain the local file through the button of type file.

2. Determine the local file type obtained

<!--HTML--><div id="result"></div>

// JSvar result = document. getElementById ("result"); // used to display the image output result, or the error message if (/image /. test (file. type) {// determines whether the file type is an image //......} Else {result. innerHTML = '<span style = "color: red;"> the file type is incorrect! </Span> ';}

3. output the obtained local image in base64 format.

Var img = new Image (), // create an Image object, used to place the original Image reader = new FileReader (); reader. readAsDataURL (file); // read and store the data in the result attribute of the FileReader object in base64 format. onload = function () {img. src = this. result; // assign the base64 string of the Image to the src document of the Image object. body. insertBefore (img, chooseImg); // Insert the output image to img before the file button. onload = function (){//...... };};

2. Draw images in the Canvas

1. Create a canvas

var canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = canvas.getContext('2d');

Note: the size of the canvas is the same as that of the input image.

2. Draw an image

context.drawImage(img,0,0,canvas.width,canvas.height);

3. Compress and output images

<! -- HTML --> image compression ratio: <input id = "rate" type = "number" min = "0" max = "100"/> %

// JSvar rate = document. getElementById ("rate "). value | 100; // input image compression ratio. The default value is 100% var imgUrl = canvas. toDataURL (file. type, rate/100); // The first parameter is the output image type, and the second parameter is the compression ratio result. innerHTML = 'compressed:  '; // place the compressed image in the result to display the img. style. display = 'none'; // hide the original image

Output the image drawn in the Canvas in base64 format again.

Iv. complete code Display

<! -- HTML --> image compression ratio: <input id = "rate" type = "number" min = "0" max = "100"/>%< input type = "file" id = "choose-img "/> <div id = "result"> </div>

// JSvar chooseImg = document. getElementById ("choose-img"), result = document. getElementById ("result"); chooseImg. onchange = function (e) {var file = this. files [0]; if (/image /. test (file. type) {var img = new Image (), reader = new FileReader (); reader. readAsDataURL (file); reader. onload = function () {img. src = this. result; document. body. insertBefore (img, chooseImg); img. onload = function () {var canvas = Document. createElement ('canvas '); canvas. width = img. clientWidth; canvas. height = img. clientHeight; var context = canvas. getContext ('2d '); context. drawImage (img, 0, 0, canvas. width, canvas. height); var rate = document. getElementById ("rate "). value | 100; var imgUrl = canvas. toDataURL (file. type, rate/100); result. innerHTML = 'compressed:  '; result. style. display = 'block'; img. style. di Splay = 'none' ;};};} else {result. innerHTML = '<span style = "color: red;"> the file type is incorrect! </Span> ';}};

It is found that the best effect is to use Canvas to compress JPEG images. The PNG compression effect is not obvious, but sometimes it becomes larger.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.