Capture a div as an image

Question

I have some div tags containing charts rendered by JavaScript. I want to export them in an image format by the press of a button. I don't know if it's possible to capture a div tag as an image using JavaScript! So there I'm asking for tips and hints.

score 2 · Answer 1 · answered Dec 05 '12 at 10:23

2

You can create an image using the canvas element. If your charts are rendered using HTML elements you need to draw that HTML onto the canvas. Then you can use toDataURL on the canvas to get the B64-encoded image data.

answered Dec 05 '12 at 10:23

Wutz

2,246
13
15

score 0 · Answer 2 · answered Dec 05 '12 at 10:18

0

This is not possible using only JavaScript.

JavaScript has no access on a PC to save files, nor can it convert the DOM to a image format.

answered Dec 05 '12 at 10:18

Cerbrus

70,800
18
132
147

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

There was a dissussion here: html5: copy a canvas to image and back Also there is a project http://www.nihilogic.dk/labs/canvas2image/

edited May 23 '17 at 11:45

Community

1
1

answered Dec 05 '12 at 10:18

Piotr Stapp

19,392
11
68
116

He is not asking to save a canvas to a image, but to screenshot a part of the page. – Cerbrus Dec 05 '12 at 10:20

score 0 · Answer 4 · answered Dec 05 '12 at 10:20

0

u might try phantomjs, http://phantomjs.org/, although I have'nt used it personally, but it is widely used for screen captures

answered Dec 05 '12 at 10:20

Fr0g

252
1
9

score 0 · Answer 5 · edited May 23 '17 at 11:53

0

JS can't access to displayed in case he can't parse HTML
You can call some utility to make screenshot of area. But it's not safe to use, so it will work if you give access.
This question was already asked here. Probably it has some good things you need

edited May 23 '17 at 11:53

Community

1
1

answered Dec 05 '12 at 10:24

Sugar

490
9
22

Capture a div as an image

5 Answers5

Linked