Image Resizer
body {
background-color: #f8f9fa;
}
.container {
margin-top: 50px;
}
#output {
display: none;
}
document.getElementById('resizeButton').addEventListener('click', () => {
const width = document.getElementById('widthInput').value;
const height = document.getElementById('heightInput').value;
const imageInput = document.getElementById('imageInput');
const outputImage = document.getElementById('outputImage');
const downloadButton = document.getElementById('downloadButton');
if (imageInput.files.length > 0) {
const file = imageInput.files[0];
const reader = new FileReader();
reader.onload = function (e) {
outputImage.src = e.target.result;
outputImage.style.width = width + 'px';
outputImage.style.height = height + 'px';
output.style.display = 'block';
downloadButton.href = e.target.result;
};
reader.readAsDataURL(file);
}
});
