JavaScript image cropper

Brightness and contract filters

The example below shows how to interact programatically with the brightness and contract on the JavaScript image crop plugin.



JavaScript image cropper source code

<html>
<script src="https://jsuites.net/v3/jsuites.js"></script>
<script src="https://jsuites.net/v3/jsuites.layout.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v3/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:200px;height:200px;'></div>
    </div>
</div>

<div class='row' style='max-width: 320px;'>
    <div class='column p10'>
        <label> Brightness<br><input type='range' min='-1' max='1' step='.05' value='0' class='jslider' id='brightness' style='width:100%;'></label>
    </div><div class='column p10'>
        <label> Contrast<br><input type='range' min='-1' max='1' step='.05' value='0' class='jslider' id='contrast' style='width:100%;'></label>
    </div>
</div>

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

<script>
var crop = jSuites.crop(document.getElementById('image-cropper'), {
    area: [ 480, 320 ],
    crop: [ 150, 150 ],
    value: '/templates/v3/img/download-lemonadejs.png',
})

document.getElementById('brightness').onchange = function() {
    document.getElementById('image-cropper').crop.brightness(this.value);
}

document.getElementById('contrast').onchange = function() {
    document.getElementById('image-cropper').crop.contrast(this.value);
}

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