Cropper+Snapshot

[divyeshlakhotia]

Anvil Image Editor

Here is an Image Editor I designed with Anvil. It offers basic editing functions like cropping images and applying a wide range of filters to it. To achieve this, I used two javascript libraries. One was Cropper.js (fengyuanchen.github.io) And the other was GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas I will also shortly release these libraries as custom components because I found them to be quite useful(especially dom-to-image). Feel free to use any …

Here are the Custom Components I used in the App above/

The first component, ‘Cropper’ allows cropping of images and returning the result

To crop an image, add the custom component to your app and call it

self.cropper_1.crop() #This works by mentioning the aspect ratio

You can also do freecropping by using

self.cropper_1.freecrop() #free cropping of image without any ratio

Then you can call the getresult or downloadresult method

The second component ‘Snapshot’ returns a screenshot of an anvil component

You can use the

Snapshot.get_snapshot() #b64 string of image

or

Snapshot.downloadsnapshot() #download result

Login

I used the following Javascript libraries for it

Cropper.js

GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas