https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.digital-web-services.com%2Fwp-content%2Fuploads%2FFree-Image-Compressor-Tools.webp&tbnid=8lOa3FF33wLn-M&vet=12ahUKEwjBxrK7tKCAAxVHl2MGHfvdBp0QMygEegUIARD_AQ..i&imgrefurl=https%3A%2F%2Fwww.digital-web-services.com%2Ffree-image-compressor-tools.html&docid=EcAa_7_WUB3l9M&w=1600&h=900&q=image%20compressor%20tool&client=ms-android-xiaomi-rvo2b&ved=2ahUKEwjBxrK7tKCAAxVHl2MGHfvdBp0QMygEegUIARD_AQ
Image Compressor Tool
Image Compressor Tool
Copy code
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
text-align: center;
}
.container {
margin-top: 50px;
}
input[type="file"] {
display: none;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
.result {
margin-top: 20px;
}
.result img {
max-width: 100%;
margin-top: 10px;
}
javascript
Copy code
window.onload = function() {
const inputFile = document.getElementById('input-file');
const compressBtn = document.getElementById('compress-btn');
const resultDiv = document.getElementById('result');
compressBtn.addEventListener('click', function() {
const file = inputFile.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.src = e.target.result;
const compressor = new Compressor(img, {
quality: 0.6,
success(result) {
const compressedImg = URL.createObjectURL(result);
const compressedSize = (result.size / 1024).toFixed(2);
const originalSize = (file.size / 1024).toFixed(2);
const savings = ((1 - result.size / file.size) * 100).toFixed(2);
resultDiv.innerHTML = `
Original Size: ${originalSize} KB
Compressed Size: ${compressedSize} KB
Savings: ${savings}%
`;
},
error(err) {
console.log(err.message);
},
});
};
reader.readAsDataURL(file);
}
});
};
0 Comments