Manejo de imágenes con JavaScript y Canvas-daycaca

Vista prévia

Descripción

daycaca es una biblioteca JavaScript independiente que hace uso de canvas y un poco de JavaScript para manejar/procesar imágenes en el lado del cliente.

Características

• Codificación de imagen Base64.
• Recorte de imagen.
• Compresión de imagen.
• Rotación de imagen.

Funcionamiento

Instale la daycaca a través de NPM.

# NPM
$ npm install daycaca --save

Importa el daycaca en el proyecto.

import daycaca from 'daycaca';

O incluya el archivo JavaScript ' daycaca. min. js ' en el documento.

<script src="daycaca.min.js"></script>

Optimice su imagen y conviértalo a Base64:

• @param {el | String}: src el origen de la imagen
• @param {Function}: callback

daycaca.base64('image.png', () => {

//...
});

Comprima su imagen.

• @param {el | String}: src el origen de la imagen
• @param {Number}: la calidad de la imagen (100 = la calidad más alta)
• @param {Function}: callback

daycaca.compress('image.jpg', 10, () => {

//...
});

Recorta tu imagen a través del lienzo y genera datos.

• @param {el | String}: src el origen de la imagen
• @param {Options}: opciones de recorte
• @param {Function}: callback

daycaca.crop('image.jpg', {

x: 20,

y: 20,

w: 120,

h: 60

}, () => {

//...
});

Gire su imagen por ciertas degress.

• @param {el | String}: src el origen de la imagen
• @param {grado}: la rotación de las grados
• @param {Function}: callback

daycaca.rotate('image.jpg', 180, () => {

//...
});

Cambie el tamaño de la imagen.

• @param {el | String}: src el origen de la imagen
• @param {ratio}: ratio
• @param {Function}: callback

daycaca.resize('image.jpg', 0.5, (data) => {

//...
});

Registro de cambios

10/29/2018

• v1.0.8: Added resize.