Image Resizer
body {
font-family: Arial, sans-serif;
text-align: center;
}
.resizer-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
color: #333;
}
.input-fields {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
input[type="number"] {
width: 45%;
padding: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
.result-image {
margin-top: 20px;
}
#resized-image {
max-width: 100%;
height: auto;
}
document.addEventListener("DOMContentLoaded", function() {
const imageInput = document.getElementById("image-input");
const widthInput = document.getElementById("width");
const heightInput = document.getElementById("height");
const resizeButton = document.getElementById("resize-button");
const resizedImage = document.getElementById("resized-image");
const downloadLink = document.getElementById("download-link");
resizeButton.addEventListener("click", function() {
const selectedFile = imageInput.files[0];
const newWidth = parseInt(widthInput.value);
const newHeight = parseInt(heightInput.value);
if (selectedFile && newWidth && newHeight) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.src = e.target.result;
img.onload = function() {
const canvas = document.createElement("canvas");
canvas.width = newWidth;
canvas.height = newHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, newWidth, newHeight);
const resizedDataURL = canvas.toDataURL("image/jpeg");
resizedImage.src = resizedDataURL;
downloadLink.href = resizedDataURL;
downloadLink.style.display = "block";
};
};
reader.readAsDataURL(selectedFile);
} else {
alert("Please select an image and provide width and height.");
}
});
});
