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


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


2,890 visits, 7,442 views


This tutorial hasn't been translated.



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!