I have this finger-painting app and I want my users may save what they draw and come back later and keep drawing.
What's the lighter way to do this?
A:
One way you could do this is:
Save the canvas contents as a base64 encoded PNG image by calling canvas.toDataURL() and store the encoded string in the page's localStorage.
When you want to restore the canvas, you would create an image, set the src to be the value previously stored locally and then draw that image on the canvas.
There are other methods, such as recording all the drawing operations, storing them locally or in a server session and 'replaying' them when the page is next visited.
andrewmu
2010-08-20 09:29:55
Thank you, @andrewmu. What do you think will be lighter?
Erik Escobedo
2010-08-20 16:29:17
It depends on how complex the drawing in - for a few operations on a big canvas, storing the operations would be more efficient. For a very complex drawing with lots of operations, storing the image would be best.I think overall I would say store the image - it's compressed, so simple drawings should still be quite small.
andrewmu
2010-08-21 15:48:08
A:
HTML Save button:
<input type="button" id="save" value="Save to PNG">
Then script:
document.getElementById('save').onclick = function () {
window.location = document.getElementById("canvas").toDataURL('image/png');
};
Then you'll have to use Canvases's drawImage with the image that was saved. How/where you save the image (your server, their downloads folder) depends on how you want it loaded back.
Simon Sarris
2010-08-23 15:06:07