Image cropper

The JavaScript image cropper is a plugin to support a user-friendly photo upload and allows small online editions such as image crop or changes in brightness, contrast, rotate, zoom.


Source code

Browser
NPM
<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://jsuites.net/v4/jsuites.layout.js"></script>

<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src='https://lemonadejs.net/v2/plugins/cropper.js'></script>

<div id='root'></div>

<script>
var App = (function() {
    var self = {};
    var template = `<div>
        <Cropper/>
    </div>`
    return lemonade.element(template, self, { Cropper: cropper });
});

document.addEventListener("DOMContentLoaded", function() {
    lemonade.render(App, document.getElementById('root'));
</script>
</html>

// For installation: % npm install @lemonade-js/cropper
import Cropper from '@lemonadejs/cropper';

// Make sure element id=root on the page
var App = (function() {
    var self = {};
    var template = `<div>
        <Cropper/>
    </div>`
    return lemonade.element(template, self, { Cropper });
});

lemonade.render(App, document.getElementById('root'));

See a working example on codesandbox