alextanhongpin / Compress.js
Licence: mit
A simple JavaScript based client-side image compression algorithm
Stars: ✭ 86
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Compress.js
Flyimg
Dockerized PHP7 application runs as a Microservice to resize and crop images on the fly. Get optimised images with MozJPEG, WebP or PNG using ImageMagick. Includes face detection, cropping, face blurring, image rotation and many other options. Abstract storage based on FlySystem in order to store images on any provider (local, AWS S3...).
Stars: ✭ 762 (+786.05%)
Mutual labels: image, jpeg, compression
Imager
Automated image compression for efficiently distributing images on the web.
Stars: ✭ 266 (+209.3%)
Mutual labels: image, jpeg, compression
lzbase62
LZ77(LZSS) based compression algorithm in base62 for JavaScript.
Stars: ✭ 38 (-55.81%)
Mutual labels: base64, compression, compress
Nuxt Optimized Images
🌅🚀 Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).
Stars: ✭ 717 (+733.72%)
Mutual labels: image, jpeg
Blurify
blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from `css` mode to `canvas` mode.
Stars: ✭ 665 (+673.26%)
Mutual labels: image, canvas
Bbmetalimage
A high performance Swift library for GPU-accelerated image/video processing based on Metal.
Stars: ✭ 677 (+687.21%)
Mutual labels: image, jpeg
Pixterm
Draw images in your ANSI terminal with true color
Stars: ✭ 782 (+809.3%)
Mutual labels: image, jpeg
Scrimage
Java, Scala and Kotlin image processing library
Stars: ✭ 792 (+820.93%)
Mutual labels: image, jpeg
Instagrid Js
A Javascript library to do exactly what Instagram Layout application does
Stars: ✭ 13 (-84.88%)
Mutual labels: image, canvas
Image Optimizer
Simple lossless compression for Elementary OS
Stars: ✭ 52 (-39.53%)
Mutual labels: image, compression
Mybox
Easy tools of document, image, file, network, location, color, and media.
Stars: ✭ 45 (-47.67%)
Mutual labels: image, compress
Html To Image
✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
Stars: ✭ 595 (+591.86%)
Mutual labels: image, canvas
Leanify
lightweight lossless file minifier/optimizer
Stars: ✭ 694 (+706.98%)
Mutual labels: jpeg, compression
Sdwebimage
Asynchronous image downloader with cache support as a UIImageView category
Stars: ✭ 23,928 (+27723.26%)
Mutual labels: image, jpeg
Lepton
Lepton is a tool and file format for losslessly compressing JPEGs by an average of 22%.
Stars: ✭ 4,918 (+5618.6%)
Mutual labels: jpeg, compression
Imgproxy
Fast and secure standalone server for resizing and converting remote images
Stars: ✭ 5,688 (+6513.95%)
Mutual labels: image, jpeg
Gaussianblur
An easy and fast library to apply gaussian blur filter on any images. 🎩
Stars: ✭ 473 (+450%)
Mutual labels: image, canvas
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.
Advantage:
- quick compression on the client-side
- compress multiple images and convert them to base64 string
- save data by compressing it on the client-side before sending to the server
- automatically resize the image to max 1920px (width or height, but mantains the aspect ratio of the images)
- fix image rotation issue when uploading images from Android an iOS
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 install compress.js --save
Import
const Compress = require('compress.js')
Demo
Try out our demo here.
Usage
// Initialization
const compress = new Compress()
// Attach listener
const upload = document.getElementById('upload')
upload.addEventListener('change', function (evt) {
const files = [...evt.target.files]
compress.compress(files, {
size: 4, // the max size in MB, defaults to 2MB
quality: .75, // the quality of the image, max is 1,
maxWidth: 1920, // the max width of the output image, defaults to 1920px
maxHeight: 1920, // the max height of the output image, defaults to 1920px
resize: true, // defaults to true, set false if you do not want to resize the image width and height
}).then((data) => {
// returns an array of compressed images
})
}, false)
// or simpler
compress.attach('#upload', {
size: 4,
quality: .75
}).then((data) => {
// do something with the compressed image
})
// example output
[{
alt: '10mb-image.jpg',
data: '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBD...',
elapsedTimeInSeconds: 1.9292250000000004,
endHeightInPx: 1280,
endSizeInMb: 0.44418832116788315,
endWidthInPx: 1920,
ext: 'image/jpeg',
initialHeightInPx: 3744,
initialSizeInMb: 8.989774,
initialWidthInPx: 5616,
iterations: 1,
prefix: 'data:jpeg;base64,'
quality: 0.75,
sizeReducedInPercent: 95.058960089899,
}]
You can even convert the compressed base64 string to a file before uploading to the server:
compress.attach('#upload', {
size: 4,
quality: .75
}).then((results) => {
// Example mimes:
// image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx, image/png, image/jpeg, image/webp
// If mime is not provided, it will default to image/jpeg
const img1 = results[0]
const base64str = img1.data
const imgExt = img1.ext
const file = Compress.convertBase64ToFile(base64str, imgExt)
// -> Blob {size: 457012, type: "image/png"}
})
TODO: Add d.ts to support typescript
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].