compress.js

A JavaScript client side image compression. This library uses the Canvas API to compress the image, and thus will not work on the node.js server-side.

Support me

Maintaining open source is not easy. Would be great if you could show some support!


$3

- quick compression on the client-side
- save data by compressing it on the client-side before sending to the server
- mantains the aspect ratio of the images when resizing
- fix image rotation issue when uploading images from Android an iOS
- supports cropping the image
- New: supports cropping to desired aspect ratio, e.g. 1:1, 4:3 etc

$3

There are several limitations for this library:
- When working with image/gif, the compressed image will no longer animate.
- When working with image/png with transparent background, the compressed image will lose transparency and result in black background.

$3

NPM Package here.

``
npm install compress.js --save
`

$3

`
const Compress = require('compress.js')
`

You can also include the build/compress.min.js in your project directory, and then importing it using type module in the script tag.

`html


`

`js
// index.js
import Compress from "./compress.min.js";

// ...
`




$3

Try out our demo here.

$3

`js
import Compress from "./compress.min.js";

const compressor = new Compress();

// Listen to file upload events.
upload.addEventListener(
"change",
async function (evt) {
const file = evt.target.files[0];
const newFile = await compressor.compress(file, {
quality: 0.95,
crop: true, // If true, will crop a square image from the center.
maxWidth: 320, // Image width will not exceed 320px.
maxHeight: 320, // Image height will not exceed 320px.
});

// Display the image on the img element.
img.src = URL.createObjectURL(newFile);
},
``