JavaScript image cropper

Rotate and zoom controls

The example below shows how to interact programatically with the rotate and zoom from the image current on the JavaScript image crop plugin.



JavaScript image cropper 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:200px;height:200px;'></div>
    </div>
</div>

<div class='row' style='max-width: 320px;'>
    <div class='column p10'>
        <label> Zoom<br><input type='range' step='.05' min='0.1' max='5.45' value='1' class='jslider' id='zoom' style='width:100%;'></label>
    </div><div class='column p10'>
        <label> Rotate<br><input type='range' step='.05' min='0.1' max='5.45' value='1' class='jslider' id='rotate' 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/v4/img/lemonadejs.png',
})

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

document.getElementById('rotate').onchange = function() {
    document.getElementById('image-cropper').crop.rotate(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>