Where Users can Upload Resizer image tools

Image Resizer Tool

Resize your images easily and download them.

Set Width (px):

Set Height (px):

body { background-color: #f0f8ff; font-family: 'Arial', sans-serif; } .container { margin-top: 50px; } #resizeButton, #downloadButton { font-size: 18px; } #previewImage { max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } document.getElementById('imageInput').addEventListener('change', handleImageUpload); document.getElementById('resizeButton').addEventListener('click', resizeImage); document.getElementById('downloadButton').addEventListener('click', downloadImage); let originalImage = null; let resizedImage = null; function handleImageUpload(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function (e) { const img = new Image(); img.src = e.target.result; img.onload = function () { originalImage = img; document.getElementById('previewImage').src = img.src; document.getElementById('widthInput').value = img.width; document.getElementById('heightInput').value = img.height; document.getElementById('downloadButton').disabled = false; }; }; reader.readAsDataURL(file); } } function resizeImage() { const width = document.getElementById('widthInput').value || originalImage.width; const height = document.getElementById('heightInput').value || originalImage.height; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; ctx.drawImage(originalImage, 0, 0, width, height); resizedImage = canvas.toDataURL(); document.getElementById('previewImage').src = resizedImage; } function downloadImage() { if (resizedImage) { const byteArray = convertDataUrlToBlob(resizedImage); saveAs(byteArray, 'resized_image.png'); } } function convertDataUrlToBlob(dataUrl) { const [header, base64Data] = dataUrl.split(','); const mimeType = header.match(/:(.*?);/)[1]; const binaryString = atob(base64Data); const byteArray = new Uint8Array(binaryString.length); for (let i = 0; i < binaryString.length; i++) { byteArray[i] = binaryString.charCodeAt(i); } return new Blob([byteArray], { type: mimeType }); } Here's a responsive code for an Image Resizer with a download button, where users can upload an image, resize it by setting the height or width, and download the resized image. It uses HTML, CSS, and JavaScript, with a free library called FileSaver.js to handle image downloads. The styling is colorful and includes a simple layout that is responsive. Explanation: HTML: The structure includes an image upload field, inputs for setting the width and height, a button to resize the image, and a button to download the resized image. The image is previewed as soon as it is uploaded. CSS: It makes the page colorful and responsive, with styling for the buttons and image preview. JavaScript: When the user uploads an image, it's displayed in the preview area. The user can set new dimensions for width and height, and resize the image. The FileSaver.js library is used to download the resized image. Libraries used: FileSaver.js: Allows the resized image to be downloaded. You can find it here. This setup gives you a full-fledged image resizing tool with a colorful UI and responsive layout.