simple-image-compressor
v1.8.2
Published
Simple frontend JS library to compress images
Downloads
124
Readme
Simple Image Compressor
This is a client-side file compression library using web workers.
Greatly inspired by https://github.com/WangYuLue/image-conversion
Installation
NPM
npm i simple-image-compressorCDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-image-compressor-min.js"></script>Main function
compressImage()
Parameters
- file: File
- config:
{ type: 'image/jpeg' | 'image/webp' = 'image/jpeg', quality: number = 0.92 }
Return
Promise<Blob>
Usage
NPM
import { compressImage } from 'simple-image-compressor';
async function compressFile(file) {
const options = {
quality: 0.9,
type: 'image/jpeg',
};
const res = await compressImage(file, options);
return new File([res], 'new filename.jpg', { type: 'image/jpeg' });
}
const file = document.getElementById('file-input')?.files?.[0];
const compressedImage = await compressFile(file);
// upload to server, etc.CDN
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-image-compressor-min.js"></script>
<script>
window.onload = () => {
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async () => {
const file = fileInput.files[0];
const options = {
quality: 0.9,
type: imageCompressor.imageTypes.WEBP,
};
const compressedImage = await imageCompressor.compressImage(file, options);
// do something with the compressed image
});
};
</script>
</head>
<body>
<input
id="file-input"
type="file"
/>
</body>
</html>Additional Export
import { imageTypes, compressImage } from 'simple-image-compressor';imageTypes is an object containing the two expected values for config.type:
const imageTypes = {
WEBP: 'image/webp',
JPEG: 'image/jpeg',
};How it works
File -> imageBitMap -> Canvas -> Blob
"ImageBitMap -> Canvas -> Blob" happens in a web worker, allowing for parallel processing.