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:'' } |
