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

Category: Image , Javascript | February 24, 2018

0 Comment

Demo Download

AUTHOR:	denis-kalinichenko
VIEWS TOTAL:	1,939 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	February 24, 2018
LICENSE:	MIT

---

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