img-cropper v0.4.0
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
andheight
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 as1
,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 theonCrop
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 optionalx, 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
.