JavaScript Image cropper

Quick reference

Considering the example below:

<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<link rel="stylesheet" href="" type="text/css" />

<div id="image-cropper"></div>

var cropper = jSuites.crop(document.getElementById('image-cropper'), {
    area: [ 480, 320 ],
    crop: [ 150, 150 ],


Method Description
cropper.resetCropSelection();Reset the crop selection
cropper.reset();Reset the current image edition and canvas
cropper.contrast(double);Change the image contrast. Input value as double; Valid range: -1 to 1
cropper.brightness(double);Change the image brightness. Input value input as double; Valid range: -1 to 1
cropper.getImageType();Get the image type uplodaed to the cropper.
cropper.getSelectionCoordinates();Get the crop coordinates from the current selection.
cropper.getCroppedImage();Get a new DOM image element based on the crop selection.
cropper.getCroppedContent();Get a new based 64 image code based on the crop selection.
cropper.getCroppedAsBlob();Get a new blob reference based on the crop selection.
cropper.getImage();Get the DOM of the image from the cropper.
cropper.getCanvas();Get the DOM of the canvas from the cropper.
cropper.addFromFile();Start the edition of a new imagem from the computer.
cropper.addFromUrl(string);Start the edition of a new imagem from a remote URL. Be aware of CORS limitations.
cropper.zoom(double);Apply zoom to the image.
cropper.rotate(double);Apply rotate to the image.


Method Description
onloadThe component is ready.
onload(DOMElement element) => void
onchangeWhen a new image is loaded.
onchange(DOMElement element, DOMElement image) => void

Initialization options

Property Description
area: array(int, int)Component full area.
crop: array(int, int)Crop selection area.
remoteParser: stringURL of a remote backend image parser to workaround CORS limitations.
allowResize: booleanAllow the crop selection resize.
text: object{ extensionNotAllowed:'', imageTooSmall:'' }