alextanhongpin/compress.js

A simple JavaScript based client-side image compression algorithm

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 Package here.

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
    rotate: false, // See the rotation section below
  }).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"}
})

Rotation

To enable auto-rotation based on browsers support for exif-orientation, pass the rotate options in the config.

// Use Modernizr to detect if exit-orientation is supported.
const browserSupportsExifOrientation = () => {
  return new Promise((resolve) => Modernizr.on("exiforientation", resolve));
};

// Only rotate if browser does not support exit orientation.
const shouldRotate = async () => {
  const supported = await browserSupportsExifOrientation();
  return !supported;
};

const rotate = await shouldRotate();

// When compressing ...
compress.compress(files, {
    ...
    rotate, // Pass the rotation here
  })

compress.js's Issues

Cropp error

When I get another image and try to crop it without updating the page, a cropping error happens.
Cropp for the first time:
https://ibb.co/w40qzQK

Cropp for the second time without updating the page:
https://ibb.co/x8htNy4

It happens with the same or another image.

Facing issue in importing nextjs

When I try to use compress.js latest version i.e. 1.2.1 then it shows a build error that regenerator runtime cannot import from outside the module. Please look into it.

Make it clearer that units are decimal multiples of bytes

compress.js/src/core/converter.js

Lines 93 to 94 in 881f199

	KB: size / 1000,
	MB: size / (1000 * 1000)

I think the number here should be 1024 rather than 1000 otherwise it's a bit misleading.

Rotate image on loading from mobile devices.

I tried to load image from android/ios devices on chrome/safari browser. And it rotate to horizontal orientation all images (from vertical turn to 90°).

File size from base64 calculation

Out of interest, how did you come up with this calculation? @alextanhongpin

compress.js/src/core/base64.js

Line 3 in 881f199

return (len - 814) / 1.37

Exif orientation support broken with Safari 13.1 (iOS and Desktop)

In Safari 13.1 (released a few days ago on iOS as part of iOS 13.4.1), the EXIF orientation value is no longer being handled properly, and the compressed image that is output will not have the correct orientation.

I believe that this change in Webkit (used by Safari) is the source of the problem: https://bugs.webkit.org/show_bug.cgi?id=201123

The required action for this library would be to ignore the EXIF orientation value when on Safari 13.1 (or later).

The easiest way to reproduce this is to go to the https://davidmoodie.com/client-compress/ demo site using a Safari or Chome browser on a device running iOS 13.4.1 and attempt to upload the attached image. This image has orientation EXIF value of 3 (rotated 180 degrees).

The demo page will return the image rendered upside down. However, the same image on a device not running iOS 13.4.1 will return the image rendered with the proper orientation.

Fork

Hi, thanks for your great package. It inspired me to make some changes that I found useful. The fork is here if interested: https://github.com/davejm/client-compress

How to use this?

I just trying for a couple days but, why I can't upload compressed image or change image value in the html image input?

Transparency lost on png images

Hi,

Thanks for this awesome library, it's very handy and simple.
However, if I try to compress a png image with transparency,
the transparent parts would turn into black as result.

Is there anyway to solve this?

Thanks for all the good works again!

P.S. This is what looks like on the demo page, the original image is here.

Why you use jpeg ?

Hi @alextanhongpin,

I want to know why you use exclusively the jpeg format to output the image ?
Why not png ?

It is possible to add param to custom that ?

Thanks.

Error when running jest

I'm getting an error when running jest

/node_modules/compress.js/src/index.js:2
    import "regenerator-runtime/runtime.js";
    ^^^^^^
SyntaxError: Cannot use import statement outside a module

import Compress from 'compress.js'

No idea what to do here.