https://github.com/gera2ld/img-cropper
A lite image cropper based on canvas
https://github.com/gera2ld/img-cropper
Last synced: about 1 year ago
JSON representation
A lite image cropper based on canvas
- Host: GitHub
- URL: https://github.com/gera2ld/img-cropper
- Owner: gera2ld
- Created: 2016-05-06T15:08:20.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-30T09:07:47.000Z (over 9 years ago)
- Last Synced: 2025-06-05T01:39:19.880Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://gera2ld.github.io/img-cropper
- Size: 32.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ImageCropper
===
Installation
---
``` sh
# Via NPM
$ npm i img-cropper
# Via Bower
$ bower i img-cropper
```
Usage
---
``` js
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`.