Sample code for Canvas and image compression

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

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

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]; // ... (Part of the code is omitted and will be shown in sequence, the same below)};

It's very simple, just get the local file through the button with type file.

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

 // JSvar result = document.getElementById(result); // Used to display image output results, or error prompts if(/image/.test(file.type)){ // Determine whether the file type is an image // ... }else{ result.innerHTML = '<span style=color: red;>Wrong file type! </span>';}

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

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

Note: The canvas size is the same as the width and height of the input image.

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

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

 // JSvar rate = document.getElementById(rate).value || 100; // Enter the image compression ratio, the default is 100% var imgUrl = canvas.toDataURL(file.type,rate/100); // The first parameter is the output image type, and the second one is the compression ratio result.innerHTML = 'After compression: <img src='+ imgUrl +' />'; // Display the compressed image in the result img.style.display = 'none'; // Hide the original image

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

 <!--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 = 'After compression: <img src='+ imgUrl +' />'; result.style.display = 'block'; img.style.display = 'none'; }; }; } else{ result.innerHTML = '<span style=color: red;>Wrong file type! </span>'; }};

After testing, it was found that the JPEG format image compression effect is best through Canvas, while the PNG compression effect is not obvious, and sometimes it becomes larger.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.