How do I save an image into a string then into Local Storage?

Hello Construct 3 Team,

I have an app where I would like the user to be able to edit the background with their file. Upon uploading, the user will then be able to view the edited BG next time they log on.

However, I do not know how to make an image into a string so I can save it to Local Storage.

As I am quite new, could someone show me the exact steps?

Thanks,

KBSAE

github.com/igortyhon/c3example-SaveGame-to-local-storage

github.com/igortyhon/c3example-SpriteFromURL-SaveLocalStorage

These examples might be helpful.

Thanks for the quick reply, as I have never used GitHub I am not sure where about those examples are. All I can see is a small introduction and a screenshot.

Here is another example

dropbox.com/s/2ejptq8tlgl57n0/DrawingCanvas_SaveLS.c3p

Thank you dop2000

I am sure that example is what I am looking for, however as I have never used DrawingCanvas I am unsure how to change it because:

I would want the user to change and select the image by FileChooser and I am unsure how to link this to DrawingCanvas.

Look at this screenshot below and please tell me how I have gone wrong (it obviously is all wrong because I just copy-pasted it without any knowledge).

Thanks,

KBSAE

I've just finished a prototype for a project that does similar so thought I'd put all my recently acquired knowledge to work and make this sample project:

drive.google.com/file/d/1yFU4VRNWxOfEVbSs5vkE3vu-0ImHsLY7/view

Essentially, it checks local storage for a picture and if it exists, loads it into a sprite then resizes/repositions it. If you click the picture it opens a file chooser to select a picture - in which case it loads it into the sprite and also saves it. The one gotcha is that to save a picture to local storage requires that the picture be in a binary data object which you can't populate directly from the file chooser. Instead you make an AJAX request to the file chooser to populate the binary object - then you can write it to local storage.

My project's a little more complex and also involves saving pictures to and loading from a remote server, saving them to local storage for off-line use, caching previous/next pictures in memory to speed up loading when a user switches between pictures plus cropping of photos uploaded via the file chooser before sending them to the remote server for storage - so feel free to pick my brains if you need anything more!

citron2010 thank you,

I used exactly what you had and it works!

Thanks a lot dop2000 and igortyhon for helping as well.

I really appreciate your help,

Thanks,

KBSAE