Introduction to Compressorjs
Compressorjs is a lightweight JavaScript library specifically designed to optimize image compression for web applications. It is popular for its simplicity and efficiency, making it a go-to solution for developers looking to reduce image sizes without compromising quality.
Installation
npm install compressorjs Basic Usage
Below is a simple example of how to use Compressorjs to compress an image:
import Compressor from 'compressorjs';
const file = document.querySelector('input[type="file"]').files[0];
new Compressor(file, {
quality: 0.6,
success(result) {
console.log(result); // Compressed image file
},
error(err) {
console.error(err.message);
},
}); Advanced Options
Compressorjs offers a range of options to fine-tune the compression settings:
- maxWidth and maxHeight: Specify maximum dimensions for the output image.
- minWidth and minHeight: Specify minimum dimensions for the output image.
- convertSize: Convert any image larger than this size (in bytes) to JPEG.
- aspectRatio: Maintain the aspect ratio of the original image.
new Compressor(file, {
quality: 0.8,
maxWidth: 1000,
minHeight: 500,
convertSize: 5000000, // 5MB
aspectRatio: 1.77,
success(result) {
console.log(result);
},
error(err) {
console.error(err.message);
},
}); Blob and File Conversion
Compressorjs handles both Blob and File types seamlessly. Here’s an example:
const blob = new Blob([file], { type: 'image/jpeg' });
new Compressor(blob, {
quality: 0.5,
success(result) {
console.log(result); // Compressed Blob
},
error(err) {
console.error(err.message);
},
}); Integrating Compressorjs in a Web App
Let’s build a simple web application to upload and compress images:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Compressor</title>
</head> <body>
<input type="file" id="upload">
<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>
<script>
document.getElementById('upload').addEventListener('change', (event) => {
const file = event.target.files[0];
new Compressor(file, {
quality: 0.6,
success(result) {
console.log(result);
},
error(err) {
console.error(err.message);
},
});
});
</script>
</body> </html> This simple app demonstrates how easy it is to integrate image compression functionality into your web projects using Compressorjs. Upload an image file, and it will be compressed to the specified quality level before being logged to the console.
Integrating Compressorjs into your web applications ensures faster load times and better user experience, especially on mobile devices.
Hash: d763647d0684899fa0efc34f42f5531eff875c3c5ec34adc4a0956b3471f6b06
