Page 1 of 1

JSON => PNG (Javascript)

Posted: Tue Dec 20, 2011 3:30 pm
by pickle
A project I'm starting to work on will be an entirely browser based game. I had an idea to somehow use images as the save files.

The script/function set I came up with will take any javascript variable (array, scalar, object), and convert it into a PNG file. This is done by first JSON.stringify()ing it, then converting ascii to hex, then hex to RGB, then using <canvas> to set individual pixels to those RGB values. I also wrote functionality to then read a PNG file & convert it back to ASCII.

Rather than post it all here, I've made a working example here: http://jsfiddle.net/SzPMj/7/

In the future I'll probably work this all into one big class - this is just a proof of concept more than anything.

Re: JSON => PNG (Javascript)

Posted: Tue Dec 20, 2011 9:09 pm
by Weirdan
I had an idea to somehow use images as the save files.
That's the most interesting part. How would you use them, and what's the advantage over, say, LocalStorage?

Re: JSON => PNG (Javascript)

Posted: Tue Dec 20, 2011 10:55 pm
by max529
what is the practical application of this procedure?

Re: JSON => PNG (Javascript)

Posted: Wed Dec 21, 2011 9:49 am
by pickle
The main reason for doing this was to see if I could. I'm thinking I'll store all the game data in one central object, then write that object to file when saving. To load a save game, just upload a save file image, it'll be read in, and the game initialized.

LocalStorage is limited to 5 MB. While I doubt the PNG files I need to generate will be anywhere close to that, it's nice to not have a limit.

Image files can also be downloaded and moved around, say from computer to computer. So, when my game becomes wildly popular, the throngs of fans will be able to swap saved games.

Re: JSON => PNG (Javascript)

Posted: Sun Dec 25, 2011 11:31 pm
by max529
This is good as long as people don't take screenshots from their monitor or take a snap on their mobiles in hopes of getting the save data to transfer to another instance of a game(like QR code). Or will it work so?

Re: JSON => PNG (Javascript)

Posted: Wed Jan 04, 2012 9:47 am
by pickle
I doubt it, the images in the example are zoomed in 2000% - the actual generated image is much smaller. Reading the image back in requires pixel perfect accuracy, so screenshots will almost certainly fail.

Re: JSON => PNG (Javascript)

Posted: Wed Jan 04, 2012 3:07 pm
by social_experiment
The idea (and application) is pretty good; reminds me of steganography.

Re: JSON => PNG (Javascript)

Posted: Mon Jan 09, 2012 2:00 pm
by tr0gd0rr
A while back this technique was used in the 10K apart contest. Here are details: http://www.iamcal.com/png-store/