How to Create an Image Resizer and Compressor Using HTML, CSS, and JavaScript

In this tutorial, we will learn how to create a simple image resizer and compressor using HTML, CSS, and JavaScript. This project involves uploading an image, specifying the desired width and height ratio, and then compressing the image while maintaining its original aspect ratio.

Step 1: Set Up the Project Files

First, create a new folder for your project and inside it, create three files: `script.js`, `style.css`, and `index.html`. You can name these files anything you like, but make sure to keep them in the same folder. The file names must be `script.js` and its extension `.js`, `style.css` and its extension `.css`, and `index.html` and its extension `.html`.

Step 2: Import Google Font

In your `style.css` file, import the Poppins font from Google Fonts using the following code:

```

@import url('https://fonts.googleapis.com/css?family=Poppins:500,600&display=swap');

```

This will load the Poppins font with weights 500 and 600.

Step 3: Set Up HTML Structure

In your `index.html` file, create an HTML structure that includes a form for uploading an image, two input fields for specifying the desired width and height ratio, and a preview area to display the resized image. Here is the code:

```

Step 4: Add JavaScript Code

In your `script.js` file, add the following code:

```

const RatioInput = document.querySelector('.ratio input');

const HeightInput = document.querySelector('.height input');

const WidthInput = document.querySelector('.width input');

const PreviewImg = uploadBox.querySelector('img');

const UploadBox = document.querySelector('.upload-box');

```

This code selects the HTML elements we created in Step 3.

Step 5: Resize and Compress Image

To resize and compress the image, use the following code:

```

document.getElementById('image-upload').addEventListener('change', function() {

const file = this.files'0';

const reader = new FileReader();

reader.onload = function(event) {

const img = new Image();

img.src = event.target.result;

img.onload = function() {

const width = parseInt(RatioInput.value);

const height = parseInt(HeightInput.value);

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

canvas.width = img.width * width / 100;

canvas.height = img.height * height / 100;

const ctx = canvas.getContext('2d');

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

const compress = function(canvas) {

return canvas.toDataURL('image/jpeg', 0.5);

};

const compressedImg = compress(canvas);

PreviewImg.src = compressedImg;

};

reader.readAsDataURL(file);

});

```

This code uploads the image, resizes it based on the specified width and height ratio, and then compresses it using the `toDataURL` method.

In this tutorial, we learned how to create an image resizer and compressor using HTML, CSS, and JavaScript. By following these steps, you can easily resize and compress images while maintaining their original aspect ratio.

If you have any questions or need further clarification on any of the steps, feel free to ask in the comments below. You can also download the source code for this project from the link provided at the bottom of this blog post.

Javascript upload image resize