html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <link rel="stylesheet"href="styles.css"> <title>Image Resizer Tool</title> </head> <body> <divclass="container"> <h1>Image Resizer</h1> <input type="file" id="imageInput"accept="image/*"> <div class="controls"> <input type="number" id="widthInput"placeholder="Width"> <input type="number" id="heightInput" placeholder="Height"> <buttonid="resizeButton">Resize</button> </div> <img id="resizedImage" alt="Resized Image"> <aid="downloadButton" download="resized_image.png">Download</a> </div> <scriptsrc="script.js"></script> </body> </html>CSS (styles.css)
cssbody { font-family: Arial, sans-serif; background-color: #f0f0f0; text-align: center; }.container { background-color: #fff; max-width: 400px; margin: 0 auto; padding: 20px;border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } h1 { color: #333; } input, button { margin: 10px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; }#resizeButton { background-color: #4CAF50; color: white; cursor: pointer; }#resizeButton:hover { background-color: #45a049; } #resizedImage { max-width: 100%;height: auto; display: none; } #downloadButton { display: none; text-decoration: none;background-color: #4CAF50; color: white; padding: 10px; border-radius: 4px; margin: 10px; }JavaScript (script.js)
javascriptdocument.getElementById("imageInput").addEventListener("change", function (e) { constfile = e.target.files[0]; if (file) { const image = new Image(); image.src = URL.createObjectURL(file); image.onload = function () {document.getElementById("resizedImage").src = image.src;document.getElementById("downloadButton").style.display = "block"; }; } });document.getElementById("resizeButton").addEventListener("click", function () { constwidth = document.getElementById("widthInput").value; const height = document.getElementById("heightInput").value; const resizedImage = document.getElementById("resizedImage"); resizedImage.style.width = width + "px"; resizedImage.style.height = height + "px"; const downloadButton = document.getElementById("downloadButton"); downloadButton.href = resizedImage.src; });This code will create a responsive image resizer tool with a download button and customizable width and height fields. Users can select an image, set the dimensions, and download the resized image. Styling is provided to make the tool visually appealing. Make sure to place these code snippets in separate files (HTML, CSS, and JavaScript) and adjust the file paths accordingly.
