Image Compressor Tool

 

Image Compressor Tool

Download Compressed Image

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 400px; margin: 50px auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } h2 { margin-bottom: 20px; text-align: center; } input[type="file"] { margin-bottom: 20px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; } button:hover { background-color: #0056b3; } img { max-width: 100%; height: auto; margin-top: 20px; } function compressImage() { const fileInput = document.getElementById('fileInput'); const previewImage = document.getElementById('previewImage'); const downloadLink = document.getElementById('downloadLink'); if (fileInput.files.length === 0) { alert('Please select an image'); return; } const file = fileInput.files[0]; const reader = new FileReader(); reader.onload = function(e) { const image = new Image(); image.src = e.target.result; image.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const maxWidth = 800; const maxHeight = 600; let width = image.width; let height = image.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; ctx.drawImage(image, 0, 0, width, height); canvas.toBlob(function(blob) { const compressedImageURL = URL.createObjectURL(blob); previewImage.src = compressedImageURL; downloadLink.href = compressedImageURL; downloadLink.style.display = 'block'; }, 'image/jpeg', 0.7); }; }; reader.readAsDataURL(file); }