Image Compressor

body { font-family: Arial, sans-serif; } .container { max-width: 500px; margin: 50px auto; text-align: center; } input[type="file"] { margin-bottom: 10px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } #compressedImage { margin-top: 20px; max-width: 100%; } function compressImage() { var fileInput = document.getElementById('fileInput'); var compressedImage = document.getElementById('compressedImage'); // Check if a file is selected if (fileInput.files.length > 0) { var file = fileInput.files[0]; var reader = new FileReader(); 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'); // Set canvas dimensions to match the image canvas.width = img.width; canvas.height = img.height; // Draw image onto canvas ctx.drawImage(img, 0, 0); // Compress image var compressedDataURL = canvas.toDataURL('image/jpeg', 0.5); // Adjust compression quality here (0.5 = 50%) // Display compressed image compressedImage.innerHTML = ''; }; }; reader.readAsDataURL(file); } else { alert('Please select an image file.'); } } This implementation allows users to select an image file, compress it, and display the compressed version. It uses the HTML5 Canvas API to perform the image compression on the client side. You can adjust the compression quality by changing the second parameter of canvas.toDataURL() method (0.5 in this example, representing 50% quality).