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