Cropper+Snapshot

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

https://anvil.works/build#clone:3TH5IJ2SMTV5XGKB=SYWXLYBAAABW2QQCG2G76LYP
I used the following Javascript libraries for it

https://fengyuanchen.github.io/cropperjs/

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

4 Likes