Image resizer

body { font-family: Arial, sans-serif; } .container { max-width: 600px; margin: 0 auto; text-align: center; } input, button { margin: 5px; padding: 8px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #3498db; color: #fff; cursor: pointer; } .preview { margin-top: 20px; } .preview img { max-width: 100%; height: auto; border: 1px solid #ccc; border-radius: 5px; } function previewImage(event) { const input = event.target; const reader = new FileReader(); reader.onload = function() { const img = document.getElementById('previewImage'); img.src = reader.result; img.style.display = 'block'; }; reader.readAsDataURL(input.files[0]); } function resizeImage() { const img = document.getElementById('previewImage'); const width = document.getElementById('width').value; const height = document.getElementById('height').value; const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); const downloadLink = document.getElementById('downloadLink'); downloadLink.href = canvas.toDataURL('image/png'); downloadLink.style.display = 'block'; } function previewImage(event) { const input = event.target; const reader = new FileReader(); reader.onload = function() { const img = document.getElementById('previewImage'); img.src = reader.result; img.style.display = 'block'; }; reader.readAsDataURL(input.files[0]); } function resizeImage() { const img = document.getElementById('previewImage'); const width = document.getElementById('width').value; const height = document.getElementById('height').value; const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); const downloadLink = document.getElementById('downloadLink'); downloadLink.href = canvas.toDataURL('image/png'); downloadLink.style.display = 'block'; }