G

Image Resizer

Width: Height:

body { font-family: Arial, sans-serif; } .container { max-width: 600px; margin: 0 auto; text-align: center; padding: 20px; } h1 { color: #333; } input[type="file"], input[type="number"] { margin: 5px; padding: 5px; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } #previewContainer { margin-top: 20px; } #previewImage { max-width: 100%; } const imageInput = document.getElementById('imageInput'); const widthInput = document.getElementById('widthInput'); const heightInput = document.getElementById('heightInput'); const resizeButton = document.getElementById('resizeButton'); const previewImage = document.getElementById('previewImage'); const downloadLink = document.getElementById('downloadLink'); imageInput.addEventListener('change', () => { const file = imageInput.files[0]; if (file) { previewImage.src = URL.createObjectURL(file); previewImage.style.display = 'block'; } }); resizeButton.addEventListener('click', () => { const width = widthInput.value; const height = heightInput.value; previewImage.style.width = width + 'px'; previewImage.style.height = height + 'px'; downloadLink.href = previewImage.src; }); // Reset dimensions and download link previewImage.addEventListener('load', () => { widthInput.value = ''; heightInput.value = ''; downloadLink.href = ''; });