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.
Maintaining open source is not easy. Would be great if you could show some support!
- 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
There are several limitations for this library:
- When working with
image/gif, the compressed image will no longer animate. - When working with
image/pngwith transparent background, the compressed image will lose transparency and result in black background.
NPM Package here.
npm install compress.js --save
Using jsDelivr CDN:
Important
The script tag must include type="module" to work.
<!-- index.js is your file that needs to execute compress.js-->
<script src="./index.js" type="module"></script>And in your index.js, you can import the desired version:
// index.js
"use strict";
import Compress from "https://cdn.jsdelivr.net/npm/[email protected]/build/compress.min.js";
const compressor = new Compress();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.
<!-- index.html -->
<script type="module" src="index.js"></script>// index.js
import Compress from "./compress.min.js";
// ...Try out our demo here.
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);
},
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
