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.

The LemonadeJS cropper is based on jsuites image cropper component.

Documentation

Method Description
deletePhoto()Clear any image on the container
uploadPhoto()Open the modal to upload a new photo
getValue()Get the photo information on the cropper container
setValue()Set the photo to the cropper container


Example

A linkedin-style photo uploader with cropper and adjustments.

See this example on JSFiddle


Source code


Browser
NPM
<html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/css/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.css" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/cropper.min.js'></script>

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

<script>
function App() {
    const self = this;
    self.save = function() {
        console.log(self.cropper.getValue());
    }
    return `<>
        <div style="border:1px solid #ccc;">
            <Cropper :ref="self.cropper" />
        </div>
        <input type="button" value="console.log()" onclick="self.save()" />
    </>`
}
// Register component
lemonade.setComponents({ Cropper });
// Render app
lemonade.render(App, document.getElementById('root'));
</script>
</html>

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

// Register component
lemonade.setComponents({ Cropper });

// Make sure element id=root on the page
function App() {
    const self = this;
    self.save = function() {
        console.log(self.cropper.getValue());
    }
    return `<>
        <div style="border:1px solid #ccc;">
            <Cropper :ref="self.cropper" />
        </div>
        <input type="button" value="console.log()" onclick="self.save()" />
    </>`
}
// Render
lemonade.render(App, document.getElementById('root'));