Take snapshot from Canvas and save it to disk or upload to server..?

[Carsten]

Hi,

can I somehow take a snapshot from what I drew on a Canvas and save it
to disk (make browser to pop up save image dialog) or upload it to
some server?

Thanks,
Carsten

[Thomas Broyer]

This is what toDataUrl and getImageData are for.

[Carsten]

Sorry...I was too unspecific. I am drawing on a small canvas. Mainly
shapes. When I say I want to take a snapshot, I want to be able to get
a 'snapshot' at any resolution. In theory I would need to resize
everything...canvas, shapes, etc. and redraw everything. Is there a
simpler solution?

[Jens]

I don't think so. Canvas is pixel based and everything you can export from it is basically a .png file. I think you would need to implement some sort of a scene graph that knows what has been painted and a resize operation that can be applied to that scene graph. The scene graph is then your "resolution independent" snapshot.

But I would recommend using SVG instead. To see whats possible with SVG you can take a look at http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html 

Just paint some stuff and then click on the upper left icon and choose "Save Image" and you will see the SVG XML that you can store and modify (e.g. resize). For older IE you can use VML instead.

-- J.