Image Resizer Tool

Width: Height:

Download Image

body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 100%; } h1 { color: #333; margin-bottom: 20px; } .uploader input { display: none; } .uploader label { background-color: #4CAF50; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; } .resizer { margin-top: 20px; } .resizer label { margin-right: 10px; } .resizer input { width: 80px; padding: 5px; margin-right: 10px; border: 1px solid #ccc; border-radius: 5px; } #resizeButton { background-color: #2196F3; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } #resizeButton:hover { background-color: #0b7dda; } #result { margin-top: 20px; display: none; flex-direction: column; align-items: center; } #outputImage { max-width: 100%; margin-bottom: 10px; } #downloadLink { background-color: #f44336; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; cursor: pointer; } #downloadLink:hover { background-color: #d32f2f; } document.getElementById('imageInput').addEventListener('change', function(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Set initial canvas size canvas.width = img.width; canvas.height = img.height; // Draw the image onto the canvas ctx.drawImage(img, 0, 0); // Display the image and options document.getElementById('result').style.display = 'flex'; document.getElementById('outputImage').src = canvas.toDataURL(); } img.src = e.target.result; } if (file) { reader.readAsDataURL(file); } }); document.getElementById('resizeButton').addEventListener('click', function() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const width = parseInt(document.getElementById('widthInput').value); const height = parseInt(document.getElementById('heightInput').value); const img = new Image(); img.src = canvas.toDataURL(); img.onload = function() { // Resize based on user input const newWidth = width || img.width * (height / img.height); const newHeight = height || img.height * (width / img.width); canvas.width = newWidth; canvas.height = newHeight; ctx.drawImage(img, 0, 0, newWidth, newHeight); // Update the output image and download link document.getElementById('outputImage').src = canvas.toDataURL(); document.getElementById('downloadLink').href = canvas.toDataURL(); } });