Free Web Design Code & Scripts

Resize Image JavaScript Using Canvas

Resize Image Javascript Using Canvas
Code Snippet:Resizing Images in JavaScript Simplified
Author: Envato Tuts+
Published: 4 weeks ago
Last Updated: November 23, 2025
Downloads: 74
License: MIT
Edit Code online: View on CodePen
Read More

This tutorial provides a comprehensive guide on how to implement image resizing functionality using JavaScript and the Canvas API. Leveraging the canvas element offers a performant and flexible way to manipulate images directly within the browser, enhancing user experience by avoiding server-side processing for simple image adjustments. With this guide, you’ll learn to resize images directly in your browser using JavaScript and HTML canvas, providing a responsive user experience.

<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Dosis'>

Resizing Images in JavaScript

Image Credit: Pixabay

Setting up the HTML Structure

First, we need to create the basic HTML structure for our image resizer. This includes a canvas element where the resized image will be displayed and a download button to save the resized image.

<h2>Resizing Images in JavaScript</h2>
<p>Image Credit: <a href="https://pixabay.com/photos/tulips-flowers-field-sky-6897351/">Pixabay</a></p>
<div><canvas id="canvas"></canvas></div>

<div><button class="download">Download Image</button></div>

<script>
  imagePath = 'data:image/jpeg;base64,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';
</script>
    <script  src="./script.js"></script>

Styling with CSS

Now let’s style our image resizer using CSS. This will enhance the visual appeal and user experience of our application.

* {
  padding: 0;
  margin: 0;
  boxz-sizing: border-box;
}

body {
  margin: 20px auto;
  font-family: 'Dosis';
  font-weight: 300;
  text-align: center;
  font-size: 1rem;
}

canvas {
  margin: 20px auto;
}

input {
  border: none;
  border-bottom: 1px  solid black;
  font-family: 'Dosis';
  margin: 1rem;
  text-align: center;
  outline: none;
  width: 200px;
}

button {
  background: yellowgreen;
  border: 2px solid black;
  color: black;
  border-radius: 5px;
  padding: 1rem 2rem;
  cursor: pointer;
  font-family: 'Dosis';
}

h2 {
  margin: 1rem 0;
}

div.wrapper {
  display: flex;
  flex-direction: column;
}

form {
  display: flex;
  justify-content: center;
}

label {
  margin: 0 1rem;
  color: gray;
}

Implementing Image Resizing with JavaScript

This part involves writing the JavaScript code to handle image resizing. We’ll use the canvas API to load the image, resize it, and display it on the canvas.

//resize and draw the image on first load
resizeImage(imagePath, 360, 240);

//resize the image and draw it to the canvas
function resizeImage(imagePath, newWidth, newHeight) {
    //create an image object from the path
    const originalImage = new Image();
    originalImage.src = imagePath;
 
    //get a reference to the canvas
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
 
    //wait for the image to load
    originalImage.addEventListener('load', function() {
        
        //get the original image size and aspect ratio
        const originalWidth = originalImage.naturalWidth;
        const originalHeight = originalImage.naturalHeight;
        const aspectRatio = originalWidth/originalHeight;
 
        //if the new height wasn't specified, use the width and the original aspect ratio
        if (newHeight === undefined) {
            //calculate the new height
            newHeight = newWidth/aspectRatio;
            newHeight = Math.floor(newHeight);
            
            //update the input element with the new height
            hInput.placeholder = `Height (${newHeight})`;
            hInput.value = newHeight;
        }
      
        //set the canvas size
        canvas.width = newWidth;
        canvas.height = newHeight;
         
        //render the image
        ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);
    });
}

const downloadBtn = document.querySelector("button.download");
 
//a click event handler for the download button
//download the resized image to the client computer
downloadBtn.addEventListener('click', function() {
    //create a temporary link for the download item
    let tempLink = document.createElement('a');

    //generate a new filename
    let fileName = `image-resized.jpg`;
  
    //configure the link to download the resized image
    tempLink.download = fileName;
    tempLink.href = document.getElementById('canvas').toDataURL("image/jpeg", 0.9);
  
    //trigger a click on the link to start the download
    tempLink.click();
});

Adding Header Assets

For this example you can use these to improve user experience

In conclusion, this tutorial walked you through the process of creating an image resizer using JavaScript and the canvas API. You learned how to set up the HTML structure, style the application with CSS, and implement the image resizing logic using JavaScript. With this knowledge, you can now easily resize images in your browser without relying on server-side processing.

Loading... ...

Loading preview...

Device: Desktop
Dimensions: 1200x800
Lines: 0 Characters: 0 Ln 1, Ch 1

Leave a Comment

About W3Frontend

W3Frontend provides free, open-source web design code and scripts to help developers and designers build faster. Every snippet is reviewed before publishing for quality. Learn more.