How can I save a snapshot image (taken with userMedia) locally and load it later on?

Hi there! I wish to save user photo taken with camera using userMedia as an avatar in order to load later on in the game. I tried with the C3 user media example and it works fine, but the only option is to Invoke download with Browser object.

I tried to save the generated url (userMedia.SnapshotURL) in localStorage, but can´t access it after the current session.

Is there any way to access the downloads location from C3? or any other solution to accomplish this?

thank you guys!

dop2000 thank you very much!!! I agree it looks really tricky and involves many steps... too much for such a sinple thing that may be needed in many games, and specially when wishing to make an app with C3.

I wonder if it is possible to create a plugin to perform all this in a simple way. I will try to code it :)

you can try it. maybe it works

github.com/erenertugrul/construct-plugins/raw/master/plugins/image_to_base64/c3/image_base64_v1.1.zip

Oh thank you!!! Will definetly try it out!

Thank you Ashley, it is much simpler now with those new features! I just suggest that will be great to add an example of this feature to the current camera example in the start page of C3, or also make another example just with this. It is a very useful and requested feature for apps and games.

Ashley, How do you load the image back from Local Storage into a sprite, if it's not in Base64?

Load it back in to Binary Data and then load the sprite image from the BinaryData.GetURL expression. This is more efficient since it keeps it in binary all along and never converts it to base64.

Thanks, Ashley!

Sorry Ashley, I´ve been trying to implement this but couldn´t make it, could you please give a little more detail on it, specially when loading UserMedia.snapshotURL to BinaryData using ajax (I saw there is a new condition "post binary to URL" but guess it does the oposite thing). Thank you!

Here's an example that saves and loads canvas snapshots to local storage as binary data: saving-screenshots.c3p

If you use User Media snapshots, the process is exactly the same, except you'd just put the user media snapshot URL instead of the canvas snapshot URL.

Awesome, thank you very much!

Ashley, here I am posting the C3 built-in camera example, and adding the save/load example for user media, based in the snapshot example you shared, just in case someone needs it. Thank you guys for your great support!

Link to file

I am trying to save and load pictures in localstorage. Everything goes fine when saving and loading just one. But when trying to retrieve pictures from localstorage (stored with photo_1, photo_2, etc) and show them in spawned sprites inside the layout, it always shows the last picture taken in every sprite. I am using for each (ordered) in order to load each picture in different sprite. May it be a problem to have just one binary data "object"?