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>
var cropper = jSuites.crop(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:'' } |