Cropper UI API
Cropper UI Overview
Options
Name | Description | Values | Default |
|---|---|---|---|
selBoxSize | specifies the size of the selection boxes for resizing the cropper bounding box | 1, 2, 3, ... | selBoxSize: 6 |
selBoxColor | the color for the selection boxes | selBoxColor: 'darkred' | |
borderColor | the color of border of bounding box | borderColor: '#CC0000' | |
borderWidth | the width of border of bounding box | 0, 1, 2, 3, ... | borderWidth: 0 |
highlightColor | the color of border of the highlighted selection/bounding box | highlightColor: 'yellow' | |
blurColor | the color of the blurred area to be drawn around the bounding box | blurColor: 'rgba(255,255,255,0.4)' | |
fillColor | the color of area inside the bounding box | fillColor: 'rgba(255,255,255,0.0)' | |
INTERVAL | interval (in milliseconds) of checking if a redraw on canvas is required | 1, 2, 3, ... | INTERVAL: 20 |
Supported Events
The Cropper UI fires the following events (for more information about events in the Fluid Framework, see Events for Component Users):
Event | Type | Description | Parameters | Parameters Description |
|---|---|---|---|---|
onChangeWidth | default | This event is fired whenever the width of bounding box changes. | newWidth | newWidth: the new width of the bounding box |
onChangeHeight | default | This event is fired whenever the height of bounding box changes. | newHeight | newHeight: the new height of the bounding box |
onChangeLocationX | default | This event is fired whenever the x location of bounding box changes. | newLocationX | newLocationX: the new x locationof the bounding box |
onChangeLocationY | default | This event is fired whenever the y location of bounding box changes. | newLocationY | newLocationY: the new y location of the bounding box |
afterChangeModel | default | This event is fired after any parameter of bounding box changes. | newModel | newModel: the model object after the change |
Model Object
This object stores the complete model for the bounding box for the Cropper UI component. The following properties are available with the object:
x : number, // x coordinate of the bounding box
y : number, // y coordinate of the bounding box
w : number, // width of the bounding box
h : number // height of the bounding box
Methods
Method | Description | Parameters |
|---|---|---|
init(canvas, resizeFactor, image, imageX, imageY, rectX, rectY, rectW, rectH) | Begins the cropping and associates itself with the canvas element. | canvas: The canvas object with which the cropper UI should associate. |
reset (isNotForCrop) | Completes/Cancels the cropping process. Returns the cropped image's 'data URL' and the cropping dimensions as an array of two objects. | isNotForCrop (optional): Set to true to cancel the crop action. Ignore or pass false to perform cropping |
activateKeyboardAccessibility() | Activate the keyboard accessibility of cropper. | none |
deactivateKeyboardAccessibility() | Deactivate the keyboard accessibility of cropper. | none |
fixDimensions() | Fixes the dimensions of the crop bounding box. | none |
setLocationX(newLocationX) | Sets the x location of the crop bounding box. | newLocationX: The new x location of bounding box. |
setLocationY(newLocationY) | Sets the y location of the crop bounding box. | newLocationY: The new y location of bounding box. |
setWidth(newWidth) | Sets the width of the crop bounding box. | newWidth: The new width of the bounding box. |
setHeight(newHeight) | Sets the height of the crop bounding box. | newHeight: The new height of the bounding box. |