CanvasCompress

Compressing image with HTML5 canvas.

Browser Compatibility

Browser	Version
IE	10+
Chrome	22+
Firefox	16+
Safari	8+
Android Browser	4+
Chrome for Android	32+
iOS Safarri	7+

Dependencies

1. Exif.js
2. ES6 Promise polyfill.

Install

Via npm:

npm install canvas-compress --save

Via bower:

bower install canvas-compress --save

Usage

import CanvasCompress from 'canvas-compress';

const compressor = new CanvasCompress({
    type: CanvasCompress.MIME.JPEG,
    width: 1000,
    height: 618,
    quality: 0.9,
});

compressor.process(fileBlob).then(({ source, result }) => {
    // const { blob, width, height } = source;
    const { blob, width, height } = result;
    ...
});

Options

There're four optional properties for options object:

• type: string: output type, default is CanvasCompress.MIME.JPEG

• width: number: output width, default is 1000

• height: number: ouput height, default is 618

• quality: number: output quality, defalut is 0.9

Use third-party Promise

CanvasCompress.usePromise(require('bluebird'));

Supported output MIME types

Since canvas-compress uses canvas.toDataUrl() method to convert canvas to binary, the following MIME types are supported:

• 'image/png'
• 'image/jpeg'
• 'image/webp'

You can get MIME type via CanvasCompress.MIME, or use CanvasCompress.isSupportedType(MIMEtype: string) to check if it's a valid MIME type.

About alpha channel

Alpha channel is not available with MIME type image/jpeg, so when you are trying to turn an image into jpeg, you'll get a full white background(rgb(255, 255, 255)) instead of transparent black(rgba(0, 0, 0, 0)).

License

MIT.