Sujay's Free Tools(code of image processor tool)
Creating a complete image compressor tool with HTML, CSS, and JavaScript can be quite extensive, but I can provide you with a basic example to get you started. For this example, I'll use the `image-compressor` library for image compression. You can include the library by adding its script in the `<head>` of your HTML document.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Compressor Tool</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/image-compressor@1.0.0/dist/image-compressor.min.js"></script>
</head>
<body>
<div class="container">
<h1>Image Compressor Tool</h1>
<input type="file" id="imageInput" accept="image/*">
<button onclick="compressImage()">Compress Image</button>
<div id="output"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
Now, let's create the `styles.css` file for styling:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
input {
margin-top: 10px;
margin-bottom: 20px;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#output {
margin-top: 20px;
color: #333;
}
```
Lastly, create the `script.js` file for the JavaScript logic:
```js
function compressImage() {
const input = document.getElementById('imageInput');
const output = document.getElementById('output');
if (input.files.length === 0) {
output.innerHTML = 'Please select an image.';
return;
}
const imageFile = input.files[0];
const compressor = new ImageCompressor();
compressor.compress(imageFile, { quality: 0.6 })
.then((compressedBlob) => {
const compressedSize = (compressedBlob.size / 1024).toFixed(2);
const originalSize = (imageFile.size / 1024).toFixed(2);
const compressionRatio = ((originalSize - compressedSize) / originalSize) * 100;
output.innerHTML = `
<p>Original Size: ${originalSize} KB</p>
<p>Compressed Size: ${compressedSize} KB</p>
<p>Compression Ratio: ${compressionRatio.toFixed(2)}%</p>
`;
// You can upload the compressedBlob to your server or use it as needed.
})
.catch((error) => {
output.innerHTML = `Error: ${error.message}`;
});
}
```
This is a basic example, and you might need to adjust it based on your specific requirements. Also, keep in mind that using third-party libraries may have licensing considerations, so make sure to check the license of any library you use.
Comments
Post a Comment