Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alextanhongpin/compress.js
A simple JavaScript based client-side image compression algorithm
https://github.com/alextanhongpin/compress.js
base-conversion base64 base64url canvas compress compression fastest file-compressor image javascript javascript-client jpeg
Last synced: about 2 months ago
JSON representation
A simple JavaScript based client-side image compression algorithm
- Host: GitHub
- URL: https://github.com/alextanhongpin/compress.js
- Owner: alextanhongpin
- License: mit
- Created: 2016-07-22T13:26:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-14T01:49:11.000Z (4 months ago)
- Last Synced: 2024-07-19T20:33:46.132Z (2 months ago)
- Topics: base-conversion, base64, base64url, canvas, compress, compression, fastest, file-compressor, image, javascript, javascript-client, jpeg
- Language: JavaScript
- Homepage:
- Size: 9.53 MB
- Stars: 137
- Watchers: 4
- Forks: 30
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-client-side - compress.js - A simple JavaScript based client-side image compression algorithm - [Try it!](https://practical-easley-4e78c7.netlify.app/) (Multimedia / Image)
README
# 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!
[](https://buymeacoffee.com/alextan2205)
### Advantage:
- 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
### NOTE:
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.
### Installation
NPM Package [here](https://www.npmjs.com/package/compress.js).
```
npm install compress.js --save
```
### CDN
Using jsDelivr CDN:
> [!IMPORTANT]
> The script tag must include `type="module" to work.`
```html
```
And in your `index.js`, you can import the desired version:
```js
// index.js
"use strict";
import Compress from "https://cdn.jsdelivr.net/npm/[email protected]/build/compress.min.js";
const compressor = new Compress();
```
### Import
```
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";
// ...
```
### Demo
Try out our demo [here](https://practical-easley-4e78c7.netlify.app/).
### Usage
```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);
},
```