Image Compressor Tool
Creating a complete responsive image compressor tool using HTML, CSS, and JavaScript involves several steps. Below is a simple implementation that uses the `pica` library for image resizing. This tool allows users to upload an image, compress it, and download the resulting file.
HTML
```html
Image Compressor Tool
```
### CSS (styles.css)
```css
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #4A90E2;
}
input[type="file"] {
margin: 20px 0;
padding: 10px;
border: 1px solid #4A90E2;
border-radius: 4px;
background-color: #f7f9fc;
}
button {
background-color: #4A90E2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #357ABD;
}
.preview {
margin-top: 20px;
}
#download {
display: inline-block;
margin-top: 10px;
background-color: #28A745;
color: white;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
}
```
### JavaScript (script.js)
```javascript
const uploadInput = document.getElementById('upload');
const compressButton = document.getElementById('compress');
const downloadLink = document.getElementById('download');
const previewDiv = document.getElementById('preview');
const canvas = document.getElementById('canvas');
const pica = new Pica();
uploadInput.addEventListener('change', handleImageUpload);
compressButton.addEventListener('click', compressImage);
let originalImage = null;
function handleImageUpload(event) {
const file = event.target.files[0];
if (!file) return;
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
originalImage = img;
previewDiv.innerHTML = '';
previewDiv.appendChild(img);
};
}
function compressImage() {
if (!originalImage) return;
const targetWidth = originalImage.width / 2; // Adjust the compression factor as needed
const targetHeight = originalImage.height / 2;
canvas.width = targetWidth;
canvas.height = targetHeight;
pica()
.resize(originalImage, canvas)
.then(result => pica().toBlob(result, 'image/jpeg', 0.9)) // Change the quality as needed
.then(blob => {
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = 'compressed_image.jpg';
downloadLink.style.display = 'inline';
downloadLink.textContent = 'Download Compressed Image';
})
.catch(err => console.error(err));
}
```
How It Works
1. HTML: Sets up the structure, including file input, a canvas (for drawing the image), and a button for compression.
2. CSS: Provides styling to make the tool colorful and responsive.
3. JavaScript: Handles image uploading, uses the `pica` library to resize and compress the image, and prepares the download link.
Usage
1. Copy the HTML, CSS, and JavaScript code into their respective files.
2. Open the HTML file in a web browser.
3. Upload an image, click the "Compress Image" button, and then download the compressed image.
This example serves as a basic image compressor tool. You can expand its functionality by adding options for different compression ratios or output formats.
Comments
Post a Comment