捕获画布下的内容作为图像的一部分

Capture what is under my Canvas as part of the Image

本文关键字：图像一部分布下更新时间：2023-09-26

我试图做的是在保存画布内的内容时将页面中画布对象下的内容作为图像的一部分包含在页面中。

我有一个应用程序可以创建一个画布，并允许您用鼠标在其上绘制。此绘图功能已到位，因此您可以像在笔记一样在页面上绘制，因此在我可以保存带有"注释"的图像或页面后，我会在其上绘制。

到目前为止，我

能够保存淹没在画布中的内容，但由于背景不是画布的一部分，因此我无法将其保存在一起。我尝试尝试使用 html2canvas .js但它在我的情况下不起作用，因为它需要 DOM 对象将它们重新绘制到画布中，如果最终图像，它不需要画布下的内容。

我想知道是否有办法做到这一点，或者以某种方式捕获该区域中的像素并在创建时将它们重新绘制为画布的一部分。

提前非常感谢！

可能是重复的，但我会给你一个非常简短的答案;你不能（除非你做一些像HTML2canvas这样的事情，它将DOM转置到canvas元素上）

这是设计使然。如果可以的话，那将是一个安全漏洞。不允许脚本从人屏幕上的任意内容中创建图像。如果您搜索"html canvas 安全规则"，您将找到有关为什么不允许这样做的更多信息。

不幸的是，HTML2Canvas（或类似的东西）是唯一的选择，但它只是拼图的一部分。要获得所需的效果，您需要创建另一个画布来合成HTML2Canvas和绘图画布的输出。您需要将 HTML2Canvas 的输出偏移到绘图画布的位置，然后在其顶部绘制绘图画布中的图像数据。然后，您可以使用合成画布中的图像数据作为输出。