Javascript copy canvas state as image

Question

Seen a good charts plugin I want to use:

http://www.jqplot.com/tests/stackedTests.php

But for my visitors, they may want to save this as an image (via right click, copy as image menu item) or alternatively a button that says save as image or something similar.

So is it possible to save the canvas in any given state as an image file?

duplicate: http://stackoverflow.com/q/934012/496825 – gor Feb 17 '11 at 12:13 — gor, Feb 17 '11 at 12:13

score 4 · Accepted Answer · answered Feb 17 '11 at 12:10

4

I think toDataURL could help you :)

answered Feb 17 '11 at 12:10

stecb

14,478
2
50
68

Once you have the data url, you can set the source of an image object in the DOM to the data url, which will then populate an image that a user can right click and save. – Eric Rowell Oct 11 '11 at 17:40
Too bad Microsoft Word doesn't like Data URL images to be pasted (simply nothing gets pasted). It's necessary to first paste the image into an application such as Paint, and then copy it from there. – pimvdb Apr 21 '12 at 13:39

score 1 · Answer 2 · answered Feb 17 '11 at 12:11

If you are willing to use a pre-made library, you can try using Canvas2Image.

Otherwise there are a few Canvas methods that Canvas2Image wraps around and explain in more detail in the above site, namely the toDataURL method in the Canvas object that returns the data base64 encoded in the image format that you require. It's not 100% cross-browser, I think, but it's the "right" way of getting it.

Javascript copy canvas state as image

2 Answers2

Linked