Image Compressor Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f0f8ff;
color: #333;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.header {
margin-bottom: 30px;
}
header h1 {
font-size: 2.5rem;
color: #4caf50;
}
.upload-section {
margin-bottom: 30px;
}
input[type="file"] {
display: none;
}
label {
background-color: #4caf50;
color: white;
padding: 10px 20px;
font-size: 1.2rem;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
label:hover {
background-color: #45a049;
}
button {
padding: 10px 20px;
font-size: 1rem;
margin-top: 20px;
background-color: #008cba;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s;
}
button:hover {
opacity: 1;
}
.output-section {
display: none;
}
#compressed-img {
max-width: 100%;
max-height: 400px;
margin-top: 20px;
border-radius: 8px;
}
.download-btn {
background-color: #ff5722;
margin-top: 15px;
}
.download-btn:hover {
background-color: #e64a19;
}
document.getElementById('upload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
document.getElementById('compress-btn').disabled = false;
}
});
document.getElementById('compress-btn').addEventListener('click', function() {
const file = document.getElementById('upload').files[0];
new Compressor(file, {
quality: 0.6, // Adjust the quality value between 0 and 1
success(result) {
// Display compressed image
const compressedImg = document.getElementById('compressed-img');
const downloadBtn = document.getElementById('download-btn');
// Create a URL for the compressed image
compressedImg.src = URL.createObjectURL(result);
// Enable the download button
downloadBtn.disabled = false;
downloadBtn.addEventListener('click', () => {
const link = document.createElement('a');
link.href = compressedImg.src;
link.download = 'compressed-image.jpg';
link.click();
});
// Show output section
document.querySelector('.output-section').style.display = 'block';
},
error(err) {
console.error('Error during compression:', err);
}
});
});
