Making a web app that saves pictures and loads from url its settings

  • 17 favourites


Attached Files

The following files have been attached to this tutorial:


Download now 4.45 KB


Download now 397.44 KB


Download now 103.72 KB


5,973 visits, 13,705 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.


This layout basically sets the frame for the face based on the chosen gender.

It loads and asks for the camera permission from the user.

It takes a snapshot of the canvas and saves it for later use. I chose to "occlude" the background so that only the actual face of the person is used. This way if there's some background or people messing with your picture they will not be shown or saved at all.

After taking the picture the button for "next" will appear. You can either take another picture if you didn't like the one you took or click next.

After clicking next you are scrolled to the second part of the layout which lets you choose a "stage". Basically in this case it will be the background of the image to be shown. In this stripped version of the app there is only one active background. In the final app I did you got to choose between 10 groups of characters with their respective background musics and alternating between 4 scene backgrounds ( I didn't want to make 10 of those although I could)


  • Order by
Want to leave a comment? Login or Register an account!