Optimizing images on the web is a common thing. For hellocurator, we want to optimize images before the upload, we can do it without servers, on the client-side.
The Canvas element let manipulate images with Javascript quite easily.
We can found a lot of code examples about how to compress image with the Canvas API.
I will use compressorjs, a tiny librarie (3.8 kB minzipped).
Compressor.js uses the Browser's native HTMLCanvasElement.toBlob()
API to do the compression work, which means it is lossy compression.
There's a live Demo to play with it.
The code
In some case, I like to wrap dependencies in my projects.
So the code looks like:
import Compressor from "compressorjs";
export const compress = async (
file: File,
quality: number,
maxHeight: number,
maxWidth: number,
convertSize?: number
): Promise<File | Blob> => {
return await new Promise((resolve, reject) => {
new Compressor(file, {
quality,
maxHeight,
maxWidth,
convertSize,
success: resolve,
error: reject,
});
});
};
You can use more options, as provided in the GitHub repo.
And, to use it
const upload async = (data) => {
const file = data.image[0];
const compressedFile = await compress(file, 0.6, 2000, 2000, 1000);
const imageUploaded = await upload(compressedFile);
...
}
Top comments (0)