如何将div的内容保存为图像？ [重复]

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 ?

</div>

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.