Resize Image

`; }; }; reader.readAsDataURL(file); } // Dimension controls document.getElementById('width').addEventListener('input', function() { if (document.getElementById('lockRatio').checked) { document.getElementById('height').value = Math.round(originalHeight * (this.value / originalWidth)); } }); document.getElementById('height').addEventListener('input', function() { if (document.getElementById('lockRatio').checked) { document.getElementById('width').value = Math.round(originalWidth * (this.value / originalHeight)); } }); // Resize function function resizeImage() { const width = parseInt(document.getElementById('width').value); const height = parseInt(document.getElementById('height').value); popup.classList.remove('hidden'); overlay.style.display = 'block'; downloadBtn.classList.add('hidden'); setTimeout(() => { popup.classList.add('hidden'); overlay.style.display = 'none'; }, 7000); setTimeout(() => { const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(originalImage, 0, 0, width, height); preview.innerHTML = ` `; downloadBtn.classList.remove('hidden'); }, 7000); } // Download function function downloadImage() { const link = document.createElement('a'); link.download = 'resized-image.png'; link.href = preview.querySelector('img').src; link.click(); }