如何将div的内容保存为图像？

Question

我正在使用代码

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

在此我使用图像作为div的背景。并在div覆盖中添加ovelay文本到图像。

添加叠加文本后，我想将主div保存为新图像。怎么样？

Answer 1

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

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

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