Client Side Image Compressor In JavaScript

Category: Image , Javascript , Recommended | October 7, 2018
Author: xkeshi
Views Total: 4,306
Official Page: Go to website
Last Update: October 7, 2018
License: MIT

Preview:

Client Side Image Compressor In JavaScript

Description:

A simple, front-end image compressor that makes uses of JavaScript and HTMLCanvasElement.toBlob() API to optimize and compress your large images for better page speed and SEO.

Installation:

# NPM
$ npm install image-compressor.js --save

How to use it:

Import the image-compressor into your project or directly include the ‘image-compressor.js’ on the webpage.

<script src="image-compressor.js"></script>

Create a new ImageCompressor and specify the image file for compressing.

new ImageCompressor(file)

To config the image compressor, pass the following options object as the second parameter to the ‘ImageCompressor()’:

/**
 * Indicates if read the image's Exif Orientation information,
 * and then rotate or flip the image automatically.
 * @type {boolean}
 */
checkOrientation: true,

/**
 * The max width of the output image.
 * @type {number}
 */
maxWidth: Infinity,

/**
 * The max height of the output image.
 * @type {number}
 */
maxHeight: Infinity,

/**
 * The min width of the output image.
 * @type {number}
 */
minWidth: 0,

/**
 * The min height of the output image.
 * @type {number}
 */
minHeight: 0,

/**
 * The width of the output image.
 * If not specified, the natural width of the source image will be used.
 * @type {number}
 */
width: undefined,

/**
 * The height of the output image.
 * If not specified, the natural height of the source image will be used.
 * @type {number}
 */
height: undefined,

/**
 * The quality of the output image.
 * It must be a number between `0` and `1`,
 * and only available for `image/jpeg` and `image/webp` images.
 * Check out {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob canvas.toBlob}.
 * @type {number}
 */
quality: 0.8,

/**
 * The mime type of the output image.
 * By default, the original mime type of the source image file will be used.
 * @type {string}
 */
mimeType: 'auto',

/**
 * PNG files over this value (5M by default) will be converted to JPEGs.
 * To disable this, just set the value to `Infinity`.
 * Check out {@link https://github.com/xkeshi/image-compressor/issues/2 #2}.
 * @type {number}
 */
convertSize: 5000000,

/**
 * The hook function to execute before draw the image into the canvas for compression.
 * @type {Function}
 * @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
 * @param {HTMLCanvasElement} canvas - The canvas for compression.
 * @example
 * function (context, canvas) { context.fillStyle = '#fff' }
 */
beforeDraw: null,

/**
 * The hook function to execute after drew the image into the canvas for compression.
 * @type {Function}
 * @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
 * @param {HTMLCanvasElement} canvas - The canvas for compression.
 * @example
 * function (context, canvas) { context.filter = grayscale(100%) }
 */
drew: null,

/**
 * The hook function to execute when success to compress the image.
 * @type {Function}
 * @param {File} file - The compressed image File object.
 * @example
 * function (file) { console.log(file) }
 */
success: null,

/**
 * The hook function to execute when fail to compress the image.
 * @type {Function}
 * @param {Error} err - An Error object.
 * @example
 * function (err) { console.log(err.message) }
 */
error: null,

Changelog:

v1.1.4 (10/07/2018)

  • Use native forEach method first for better performance.
  • Add more detailed errors.

You Might Be Interested In:


Leave a Reply