如何捕获 HTML 画布并将其保存为图像（PNG、JPG、GIF）或 PDF？

将 HTML Canvas 捕获为图像或 PDF

问题：

您可以捕获吗HTML 画布上显示的内容并将其导出为图像（GIF、JPG、PNG）或 PDF？具体来说，如何从画布图形生成 PNG 图像？

答案：

是的，可以捕获 HTML 画布的内容并将其导出作为图像或 PDF。要从画布生成 PNG 图像：

const canvas = document.getElementById('mycanvas');
const img = canvas.toDataURL('image/png');

这将创建一个包含 PNG 数据的字符串。然后，您可以使用此数据创建新的图像元素或将其写入文件。

创建新图像元素

创建新图像元素并显示 PNG 图像，使用以下代码：

document.getElementById('existing-image-id').src = img;

这将使用 ID 设置图像元素的 src 属性'existing-image-id' 到 PNG 数据，有效地将画布内容显示为图像。

写入文件

将 PNG 数据写入到文件中，使用以下代码：

document.write('<img src="' + img + '" />');

这会将图像数据直接写入 HTML 文档。然后，您可以将文档另存为具有所需扩展名（例如 .png）的文件，以将画布内容另存为图像。

以上是如何捕获 HTML 画布并将其保存为图像（PNG、JPG、GIF）或 PDF？的详细内容。更多信息请关注PHP中文网其他相关文章！