Im in the proccess of making an image editor using kineticjs. I have all the functions working so that you can click on a button to load an image into the canvas area which then can be dragged and resizes the image. Ive also created a button to reset the canvas and another to save the canvas as a PNG server side.
My next task is to try and figure out a way so that when customers use the editor if they refresh the page the images they have imported and there positions/sizes stay in the canvas. I need this as the entire site will have lots of images on several different pages which can all be imported into the canvas. The canvas its self will be pinned to the side of the page with a button allowing people to open and close the editor no matter where they are on the site. So for example someone could add an image to the canvas, then go to a seperate page and add a different image whilst still having the previous image in there.
Ive been reading up and from what I can see I need to use JSON to save the canvas objects into a string then use localStorage to save the JSON string into the clients browser. Then when they go into another page the JSON will automatically load the data into the canvas. Im going to do some testing tomorrow but wondered if anyone has any experience with this and also any idea on how I could have the editor automatically save and load the canvas to the clients browser without the need for them to have to do this with buttons. In other words I want it to automatically back up the canvas, its images and there positions on the fly so if they navigate to another page there work wont be lost and all the data is then automatically loaded back into the editor once the page has loaded.
Any help appreciated
1 Replies - 2288 Views - Last Post: 15 August 2012 - 11:46 PM
Replies To: using JSON with localStorage to save html5 canvas data
Re: using JSON with localStorage to save html5 canvas data
Posted 15 August 2012 - 11:46 PM
I might only note that you cannot serialise HTML elements as is (circular references). though what you can do is saving the settings/changes and re-apply them when the canvas is fired up again.
Page 1 of 1