Photo compressor

Image Compressor Tool

Compressed Image:

body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .container { text-align: center; margin: 20px; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 5px; } h1 { color: #333; } input[type="file"] { margin: 10px 0; } button { background-color: #0074D9; color: #fff; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; } #result { display: none; margin-top: 20px; } img { max-width: 100%; } document.getElementById("compressButton").addEventListener("click", function () { const fileInput = document.getElementById("fileInput"); const compressedImage = document.getElementById("compressedImage"); const result = document.getElementById("result"); const file = fileInput.files[0]; if (file) { const reader = new FileReader(); reader.onload = function (e) { const img = new Image(); img.src = e.target.result; img.onload = function () { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 300; // Set your desired width canvas.height = (canvas.width / img.width) * img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const compressedDataURL = canvas.toDataURL("image/jpeg", 0.5); // Adjust the quality compressedImage.src = compressedDataURL; result.style.display = "block"; }; }; reader.readAsDataURL(file); } });