Crop images with fingers

Free Templates, Designs, and Block Combinations
,
1

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.

https://x.thunkable.com/projectPage/6310d55c2c6a450ff195855f

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!

D

5 Likes
2

Niceeeeeeeeeeee

1 Like
3

Hi this is exactly what I am looking for!
Thanks for sharing this.

How can I use this?

4

The code is all inside the web view and is based on html5 and javascript.

Consider using another js library for cropping, called cropper.js, that is based on a software license that better fits with commercial purposes.

1 Like
5

This is very cool!

I decided to try out cropping with Cloudinary. This demo lets you upload a photo and then it auto-crops it to the main subject of the photo, for example a face:

6

Yes, I tried it but the result was not always good enough.

By the way it worth a try and could be a good choice for some use cases.

7

Awesome!!
Could you please also Provide the Source Code of the Extension?