Capture a div as an image

javascript html javascript-events image-capture
MarGa picture MarGa · Dec 5, 2012 · Viewed 25.1k times · Source

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. Thanks in advance.

Answer

Wutz picture Wutz · Dec 5, 2012

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.

Related questions

Open popup and refresh parent page on close popup

I opened a popup window by window.open in JavaScript, i want to refresh parent page when I close this popup window.(onclose event?) how can I do that? window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");

Read More
HTML <input type='file'> File Selection Event

Let's say we have this code: <form action='' method='POST' enctype='multipart/form-data'> <input type='file' name='userFile'><br> <input type='submit' name='upload_btn' value='upload'> </form> which …

Read More
Run JavaScript when an element loses focus

I have a standard HTML input that I want to run JavaScript code when it loses focus. Sadly my Google searches did not reveal how to do this. To make it clear, I'm looking for a way to do this: &…

Read More