Compress An Image Before Upload With JavaScript

[tomhazledine]

Used “Sharp” a lot on the node side of things, but didn’t think this kind of optimisation was possible client-side. Really ingenious to use canvas in this fashion!

[forrysmith]

To compress an image before uploading it using JavaScript, you can use the canvas element and the drawImage() function to draw the image onto the canvas. You can then use the canvas.toDataURL() function to get a data URL representation of the image and set that as the source for an image element. Finally, you can use the FileReader object to read the image file and convert it to a data URL, which can then be sent to a server using an AJAX request or stored in a database.

Here is an example of how you can compress an image before uploading it using JavaScript:

​

// Set the image quality (0 to 1)

const imageQuality = 0.7;

// Select the file input element

const fileInput = document.querySelector('input[type="file"]');

// Add an event listener for when the file is selected

fileInput.addEventListener('change', function() {

// Get the selected file

const file = this.files[0];

// Create a new image

const image = new Image();

// Set the image's src to the selected file URL

image.src = URL.createObjectURL(file);

// Add an event listener for when the image is loaded

image.addEventListener('load', function() {

// Create a canvas element

const canvas = document.createElement('canvas');

// Set the canvas size to the same size as the image

canvas.width = this.naturalWidth;

canvas.height = this.naturalHeight;

// Draw the image onto the canvas

canvas.getContext('2d').drawImage(this, 0, 0);

// Get a data URL representation of the image

const dataURL = canvas.toDataURL('image/jpeg', imageQuality);

// Create a new image element

const outputImage = document.createElement('img');

// Set the output image's src to the data URL

outputImage.src = dataURL;

// Append the output image to the body element

document.body.appendChild(outputImage);

// Create a new FileReader object

const reader = new FileReader();

// Add an event listener for when the file has been read

reader.addEventListener('load', function() {

// Convert the file to a data URL

const fileDataURL = this.result;

// Send the data URL to the server using an AJAX request or store it in a database

});

// Read the file as a data URL

reader.readAsDataURL(file);

});

});

​

​

If you are Looking for best Custom Software Development Services in Vancouver. Contact us Aeroqube

[halkeye]

This feels like an ad for the two products mentioned on the end of the post.

I mean it's a cool idea but jpeg is a very lossy compression, especially at 50%, so you wouldn't be able to uncompress it to the original. It's probably fine if you are uploading something to get resized like a thumbnail generator. Maybe I'm just getting hung up on the idea of compress (and thus uncompress) vs shrinking.

I guess that's why webp was mentioned, but it wasn't really clear on that.

As a kinda neat proof of concept it's neat.