img-cropper's Introduction

ImageCropper

Installation

# Via NPM
$ npm i img-cropper

# Via Bower
$ bower i img-cropper

Usage

const ImageCropper = require('img-cropper');

const cropper = ImageCropper.create({
  container: document.getElementById('cropper'),
  onCrop: cropData => {
    canvasPreview.getContext('2d').drawImage(cropData.getCanvas(), 0, 0, 200, 200);
  },
});

Documents

function ImageCropper.create(options)

options have properties below:
- container: Required
  
  DOM element to contain the cropper. The cropper will be intialized with the width and height of its container if no width and height is explicitly defined.
- width (Optional)
  
  Maximum width of the cropper. If not defined, container.clientWidth will be used.
- height (Optional)
  
  Maximum height of the cropper. If not defined, container.clientHeight will be used.
- minHeight (Optional)
  
  Minimum height of the cropping rect, default as 5.
- ratio (Optional)
  
  The width / height ratio, default as 1, 0 stands for unlimited.
- directions (Optional)
  
  An array of resizer directions, default as ['nw', 'ne', 'sw', 'se'].
- onCrop (Optional)
  
  Function called with cropData when cropped image is updated.
- debounce (Optional)
  
  Either 'mouseup' or the number of time in milliseconds to debounce the onCrop call.
Returns an object with properties below:
- function reset(sourceImage, (optional) cropRect, (optional) callback)
  
  sourceImage can be , , Blob or URL string.
  
  cropRect can be an object with optional x, y, width, height properties.
  
  callback will be called with a cachable if specified.
- function setRatio(ratio)
- function setDebounce(debounce)
  
  debounce is the same as in options.
- function setRect(cropRect)
  
  Modify the crop rect manually, the same as in reset.

Recommend Projects