JavaScript cropper

The jSuites cropper is a lightweight JavaScript plugin that allow users load, crop, zoom, rotate and apply filters to a image. The plugin is responsive and brings a great user experience across different devices. It is a full open source powerful solution that can be integrated with React, Angular, Vue and among others.

Load and crop basic example.

Click in space below to upload a image

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.css" type="text/css" />

<div style="display: flex;">
    <div id="image-cropper" style="border:1px solid #ccc; margin: 5px;"></div>
    <div id="image-cropper-result"><img style="width:120px; height:120px; margin: 5px;"></div>
</div>

<p><input type="button" value="Get cropped image" id="image-getter" class="jbutton dark"></p>

<script>
cropper(document.getElementById('image-cropper'), {
    area: [ 280, 280 ],
    crop: [ 150, 150 ],
})

document.getElementById('image-getter').onclick = function() {
    document.getElementById('image-cropper-result').children[0].src =
        document.getElementById('image-cropper').crop.getCroppedImage().src;
}
</script>
</html>

More examples

Quick documentation for the cropper plugin

Methods

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

Events

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

Initialization settings

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

Integrations