Cropper de imagen táctil con JavaScript y Canvas-JS-Cropper. js

Vista prévia

Descripción

JS-Cropper. js es una biblioteca JavaScript independiente que proporciona la funcionalidad de recorte de imagen en sus imágenes con soporte adicional de arrastrar y zoom.

¿Cómo funciona?

Instale la biblioteca JS-Cropper. js.

# Yarn
$ yarn add js-cropper

# NPM
$ npm install js-cropper --save

Importe el JS-Cropper. js y JS-Cropper. CSS en el proyecto.

// ES 6
import Cropper from 'js-cropper';

// CommonJS:
const Cropper = require('js-cropper');

Cree un elemento contenedor para el área de recorte.

<div id="crop"></div>

Inicializar el Cropper de la imagen con la configuración predeterminada.

const cropper = new Cropper();
cropper.render("#crop");

Cargue una imagen que desee recortar.

cropper.loadImage("/path/to/image.jpg").then(function (crop) {

console.info("Image is ready to crop.");
});

Exporte la imagen recortada en Base64.

cropper.getCroppedImage()

Opciones predeterminadas y funciones de devolución de llamada.

const cropper = new Cropper({



width: 560,



height: 340,



onInit: function (crop) {},



onChange: function(crop) {}
});

More API methods.

const cropper = new Cropper({



// options here
});

// Changes Image Crop width.
cropper.setWidth(width);

// Changes Image Crop height.
cropper.setHeight(height);

 // Sets zoom level.
 cropper.setZoom(zoom);

// Gets data in JSON
cropper.getData();

// Sets data from JSON
cropper.setData();

// Reset
cropper.reset();