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

Install

npm install @lemonadejs/cropper

Methods

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 in JS

<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" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<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/studio/dist/index.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/index.min.js'></script>

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

<script>
function App() {
    const save = () => {
        console.log(this.cropper.getValue());
    }
    return render => render`<div>
        <div style="background: white">
            <Cropper :ref="self.cropper" />
        </div>
        <input type="button" value="console.log()" onclick="${save}" />
    </div>`
}
// Render app
lemonade.render(App, document.getElementById('root'));
</script>
</html>

Example in Lemonade

import '@lemonadejs/cropper';

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

Example in React

import React, { useRef, useEffect } from "react";
import Cropper from "@lemonadejs/cropper";

// Make sure element id=root on the page
export default function App() {
  const divRef = useRef();

  useEffect(() => {
    if (divRef.current && !divRef.current.innerHTML) {
      lemonade.render(Cropper, divRef.current);
    }
  }, []);

  return (
    <div style={{ backgroundColor: '#AAA' }}>
      <div ref={divRef}></div>
    </div>
  );
}