Photo cut circle

Hello I need your help I would like to create the option to upload or take a photo and this appears in another scene but circulates, something like this


There are some existing threads regarding upload image from file and masking.
For example

Have you searched or tried anything ?.


WATCH THIS (43.1 KB) (68.7 KB)

is this

This is an example I once posted on the forum. You can use this and connect it to the webcam. But you still need to tweak the code for that. What is your question? I can’t see any modifications made to example file…

what I want to do is for something very specific, we are recording a short film of low budget in one of the scenes an extra takes your cell phone and publishes the photo as in a kind of social network, you can do in post but we want to save time and record it in set, for brand issues we do not want to use something real like facebook or similar so we opt to make an app to use in set, use your code because it allows me to take a photo on the cell phone and place it in another scene as the actor we will meet the day of shooting so I need the first photo that is taken is uploaded in a circular form corresponding to your profile photo and the second serious that supposedly upload and publish this would have to be square again your code comes perfect because having the option to take the photo from the cel looks more realistic in camera, I just managed to make a cut oval with the first and the second I ruined it I can not make me upload the other photo, I send you photo of the project and I send you the progress of the project to see if you can help me (2.6 MB) (2,5 MB)

Added Croppie support.

Please consider becoming a sponsor to help develop the Hype Cookbook.
I will add file replacements to the cookbook and appreciate your support:

Sponsoring is here:


Newer version: (2,6 MB)
Also supports handlebars now and includes some small code cleanup on Croppie.

Have fun designing your fake social network :slight_smile:


@MaxZieb is on fire.