Crop images with fingers

Dear community,

I would like to share with you a simple example of implementing a feature for cropping images with fingers.

Managing pictures in Thunkable is where I spent a lot of weeks and I wanted to give back something that I hope can help some of you.

My problem was to find a way to crop images of ID Cards, so I first tried with the Cloudinary API but, in my experience, they were not sufficiently mature for me, so I developed something new in Javascript.

So, the final solution is based on the free javascript library Filerobot and you can find an example of how to use it in the following project.

You can then use the Thunkable web extension to post messages and receive messages to interact with the “native” part of the app (you can take inspiration from this other project, thanks to @muneer for help).

UPDATE 22.09.22
Please, pay attention to asking user permission correctly. Indeed, your app needs permission to use the camera and access the photo library but the HTML / js script, unfortunately, does not do this.

For this purpose, I suggest you read this discussion to get inspiration.

UPDATE 29.09.2022
Pay attention to FileRobot licensing because there are restrictions on how you use the library.

Enjoy it!




1 Like