php - 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 ?

Answer 1

您首先需要使用html2canvas 之类的东西，然后使用 javascript 将画布保存为图像：

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

这会将 html 呈现为图像，将图像转换为 png 数据 url，然后在新窗口中打开该 url，提示下载图像。