Touch-enabled Image Cropper with JavaScript And Canvas – js-cropper.js

Preview:

Description:

js-cropper.js is a standalone JavaScript library that provides the touch-enabled image cropping functionality on your images with additional drag and zoom support.

Basic usage:

Install the js-cropper.js library.

# Yarn
$ yarn add js-cropper
# NPM
$ npm install js-cropper --save

Import the js-cropper.js and js-cropper.css into the project.

// ES 6
import Cropper from 'js-cropper';
// CommonJS:
const Cropper = require('js-cropper');

Create a container element for the crop area.

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

Initialize the image cropper with default settings.

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

Load an image you want to crop.

cropper.loadImage("/path/to/image.jpg").then(function (crop) {
  console.info("Image is ready to crop.");
});

Export cropped image in Base64.

cropper.getCroppedImage()

Default options and callback functions.

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();