How to save the content of a div as an image?

Question

I am using the code

<div style="background:url('upload/image1.jpg'); width:300px; height:400px; position:relative;">
    <br/>
    <div style="position: absolute; top:300px; overflow:hidden;  height:100px; width:300px;" id="overlay">This is a sample text</div>
    <br/>
</div>

In this i am using an image as the background of a div. And add an ovelay text to the image as in div overlay.

After adding the overlay text i want to save the main div as a new image. How to it ?

One way would be using [html2canvas](http://html2canvas.hertzen.com/) — Patsy Issa, Jul 26 '13 at 07:18
Already discussed in stackoverflow http://stackoverflow.com/questions/14595541/capture-div-into-image-using-html2canvas — Hassan, Jul 26 '13 at 07:19
also discussed here http://stackoverflow.com/questions/13252773/converting-contents-of-a-div-into-an-image — AnaMaria, Jul 26 '13 at 07:21

score 3 · Accepted Answer · answered Jul 26 '13 at 07:20

You would first need to use something like html2canvas and then use javascript to save the canvas as an image with:

window.open(document.getElementById('canvas_id').toDataURL('image/png'));

this will render the html as an image, convert the image to a png data url, and then open that url in a new window, prompting a download of the image.

How to save the content of a div as an image?

1 Answers1