Resizing an image using JavaScript and the HTML canvas element involves creating a canvas, drawing the image onto it with the desired dimensions, and then converting the canvas back to an image.
For example, we write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resize Image with Canvas</title>
</head>
<body>
<!-- Original image -->
<img id="originalImage" src="original.jpg" alt="Original Image">
<script>
// Function to resize the image
function resizeImage() {
// Get the original image element
var originalImage = document.getElementById('originalImage');
// Create a canvas element
var canvas = document.createElement('canvas');
// Get the canvas context
var ctx = canvas.getContext('2d');
// Set the canvas dimensions to the desired size
var newWidth = 300; // New width of the image
var newHeight = 200; // New height of the image
canvas.width = newWidth;
canvas.height = newHeight;
// Draw the image onto the canvas with the new dimensions
ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);
// Convert the canvas back to an image
var resizedImage = new Image();
resizedImage.src = canvas.toDataURL(); // Convert canvas to data URL
// Append the resized image to the document
document.body.appendChild(resizedImage);
}
// Call the resizeImage function when the page loads
window.onload = resizeImage;
</script>
</body>
</html>
In this example, we have an <img> element with the ID originalImage, representing the original image that we want to resize.
We define a resizeImage() function that will be called when the page loads.
Inside the function, we create a canvas element using document.createElement('canvas').
We set the dimensions of the canvas to the desired size for the resized image.
Then we get the 2D rendering context of the canvas using getContext('2d').
Next we draw the original image onto the canvas with the drawImage() method, specifying the new dimensions.
And we convert the canvas back to an image by creating a new Image object and setting its src attribute to the data URL obtained from the canvas (canvas.toDataURL()).
- Finally, we append the resized image to the document.
When the page loads, the resizeImage() function will be called, and the resized image will be displayed on the page.
Adjust the newWidth and newHeight variables to set the desired dimensions for the resized image.
