如何将HTML转换为HTML5画布并将其下载为PNG文件

Question

每当我在输入框中输入内容时，它都会反映并可以拖放该文本。现在它是HTML格式。

我必须将HTML内容转换为图像文件并下载。

这是

<a href="http://codepen.io/vengreat/pen/pgROpr">CodePen</a>

请检查出来。

Answer 1

您可以创建一个按钮来创建“随后生成”图像的图像，并使用以下代码将文本作为图像使用HTML5 Canvas捕获。

function Capture() { 
        html2canvas(document.body, {
        onrendered: function(canvas) {
        document.body.appendChild(canvas);
      },
       width: 500,
       height: 500
    });
};

由于无法直接从HTML调用SaveAs，您可以右键单击并单击 另存为 按钮下载图像。

P.S。不要忘记在您的网页中添加html2canvas引用。

工作CodePen。

希望这会有所帮助。 ：）