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