Star

JavaScript cropper

The jSuites.crop 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



Crop example source code

<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 class='row'>
    <div class='column p10'>
        <div id='image-cropper' style='border:1px solid #ccc'></div>
    </div><div class='column f1 p10'>
        <div id='image-cropper-result'><img style='width:120px;height:120px;'></div>
    </div>
</div>

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

<script>
jSuites.crop(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>


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
onloadThe component is ready.
onload(DOMElement element) => void
onchangeWhen 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: stringURL of a remote backend image parser to workaround CORS limitations.
allowResize: booleanAllow the crop selection resize.
text: object{ extensionNotAllowed:'', imageTooSmall:'' }


More examples


Integrations