npm install croppr --save
bower install croppr
<link src="path/to/croppr.css" rel="stylesheet"/>Or if you're smart and you use a module bundler:
<script src="path/to/croppr.js"></script>
// CommonJS var Croppr = require('croppr'); // ES6 import import Croppr from 'croppr'; // Don't forgot to bundle the CSS files as well!
<img src="path/to/image.jpg" id="croppr"/>
var croppr = new Croppr('#croppr', { // options }); // Protip: You can also pass an Element object instead of a selector
var value = croppr.getValue(); // data = {x: 20, y: 20: width: 120, height: 120}
Option | Description |
---|---|
aspectRatio | Constrain the crop region to an aspect ratio.
|
maxSize | Constrain the crop region to a maximum size.
Note: |
minSize | Constrain the crop region to a minimum size.
Note: |
startSize | The starting size of the crop region when it is initialized.
Note: |
onCropStart | A callback function that is called when the user starts modifying the crop region.
|
onCropMove | A callback function that is called when the crop region changes.
|
onCropEnd | A callback function that is called when the user stops modifying the crop region.
|
onInitialize | A callback function that is called when the Croppr instance is fully initialized.
|
returnMode | Define how the crop region should be calculated.
|