Compresor de imagen del lado del cliente en JavaScript

Vista prévia

Descripción

Un compresor de imagen de front-end simple que hace uso de JavaScript y < a href = "https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob" target = "_ blank" rel = "noopener noreferrer" > HTMLCanvasElement. API toBlob () para optimizar y comprimir las imágenes grandes para mejorar la velocidad de la página y el SEO.

Instalación

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

Funcionamiento

Importe el compresor de imagen en su proyecto o incluya directamente el ' Image-Compressor. js ' en la Página Web.

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

Cree un nuevo ImageCompressor y especifique el archivo de imagen para comprimir.

new ImageCompressor(file)

Para config el compresor de imágenes, pase el siguiente objeto Options como segundo parámetro al ' 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,

Registro de cambios

v1.1.4 (10/07/2018)

• Utilice el método nativo forEach primero para mejorar el rendimiento.
• Agregue errores más detallados.