Photo Resizer in KB

Photo Resizer

function resizeImage() { var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; if (!file) { alert('Please select an image file.'); return; } var targetSize = document.getElementById('targetSize').value; if (!targetSize || isNaN(targetSize) || targetSize <= 0) { alert('Please enter a valid target size (KB).'); return; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(event) { var img = new Image(); img.src = event.target.result; img.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var width = img.width; var height = img.height; var aspectRatio = width / height; var targetWidth = Math.sqrt(targetSize * 1024 * aspectRatio); var targetHeight = targetWidth / aspectRatio; canvas.width = targetWidth; canvas.height = targetHeight; ctx.drawImage(img, 0, 0, targetWidth, targetHeight); canvas.toBlob(function(blob) { var resizedFileSize = blob.size / 1024; // Convert bytes to KB var resizedImageUrl = URL.createObjectURL(blob); var result = document.getElementById('result'); result.innerHTML = '

Resized image size: ' + resizedFileSize.toFixed(2) + ' KB

'; result.innerHTML += ''; }, 'image/jpeg', 0.9); // Adjust JPEG quality here (0.9 means 90% quality) } }; } body { font-family: Arial, sans-serif; } .container { max-width: 600px; margin: 0 auto; padding: 20px; } h1 { text-align: center; } input[type="file"], input[type="number"], button { display: block; margin: 10px auto; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } #result { text-align: center; margin-top: 20px; } This code creates a photo resizer tool where users can upload an image file and specify the target size in KB. The script resizes the image to meet the target size and displays the resized image along with the resized file size. Adjustments to JPEG quality can be made according to your requirements.