A new version of the jSuites JavaScript Cropper plugin is available here.

JavaScript Image Cropper

JavaScript Cropper

JavaScript Image cropper

Quick reference

Considering the example below:

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://jsuites.net/v4/jsuites.layout.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.layout.css" type="text/css" />

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

<script>
cropper(document.getElementById('image-cropper'), {
    area: [ 480, 320 ],
    crop: [ 150, 150 ],
});
</script>
</html>

Methods

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(callback);	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 image from the computer.
cropper.addFromUrl(string);	Start the edition of a new image 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.

Events

Method	Description
onload	The component is ready. `onload(DOMElement element, Object instance) => void`
onchange	When 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: string	URL of a remote backend image parser to workaround CORS limitations.
allowResize: boolean	Allow the crop selection resize.
text: object	{ extensionNotAllowed:'', imageTooSmall:'' }

Edit this page on GitHub