Redimensionar imagen usando JavaScript y Canvas-Morpheus Image Resize

Vista prévia

Descripción

Morpheus Image Resize es una biblioteca de JavaScript ES6 que se utiliza para redimensionar una imagen a un ancho/alto específico usando JavaScript y Canvas.

También puede establecer el nivel de escala mientras se ajusta el tamaño para mantener la relación de aspecto normal.

ideal para el cargador de imagen (archivo) que permite al usuario redimensionar y recortar imágenes grandes antes de subirlas.

Funcionamiento

Instale el paquete Morpheus Image Resize.

# NPM
$ npm install morpheus-image-resize --save

Importa el Morfeo del paquete.

import Morpheus from 'morpheus-image-resize';

Inicialice la biblioteca y especifique la anchura/altura/escala.

Morpheus.resize('image.jpg', {

height: 100,

width: 100,

scale: 50
})

Mostrar la imagen redimensionada en la Página Web.

Morpheus.resize('image.jpg', {

height: 100,

width: 100,

scale: 50
})
.then(canvas => Morpheus.toImage(canvas))
.then(image => {

document.body.appendChild(image);
});

Convierta el elemento canvas dado en un elemento Image.

@returns {Promise}
toImage(canvas)

Convierta el elemento canvas dado en un archivo. Opcionalmente, se puede establecer el nombre de archivo.

@returns {Promise}
toFile(canvas, fileName='morpheus')

Convierte el elemento canvas especificado en BLOB.

@returns {Promise}
toBlob(canvas)

Convierta el elemento canvas dado en código Base64.

@returns {Promise}
toBase64(canvas)