JavaScript Image Cropper

The JavaScript image cropper is a plugin that provides a user-friendly photo upload experience with basic editing capabilities including image cropping, brightness and contrast adjustments, rotation, and 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

A linkedin-style photo uploader with cropper and adjustments.

See this example on JSFiddle

JavaScript example

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

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'));

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>
  );
}

Edit this page on GitHub

Jspreadsheet Pro