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.







