捕获我的 Canvas 下的内容作为图像的一部分

Capture what is under my Canvas as part of the Image

我想要做的是在我保存 canvas.

中的内容时,将页面中 canvas 对象下的内容作为图像的一部分包含在内

我有一个应用程序可以创建 canvas 并允许您用鼠标在上面绘图。此绘图功能已到位,因此您可以在页面上绘图,就好像它们是笔记一样,所以在我可以使用 "notes" 保存图像或页面后,我会在上面绘图。

到目前为止,我能够保存淹没在 canvas 中的内容,但是因为背景不是 canvas 的一部分,所以我无法将它们一起保存。我尝试使用 html2canvas.js 进行试验,但它在我的情况下不起作用,因为它需要 DOM 对象并将它们重新绘制到 canvas 中,它不仅仅需要 canvas 成为最终图像的一部分。

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

非常感谢!

可能是重复的,但我会给你一个非常简短的答案; 你不能(除非你做类似 html2canvas 的事情,它将 DOM 转置到 canvas 元素上)

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

不幸的是,HTML2Canvas(或类似的东西)是唯一的选择,但它只是难题的一部分。要获得您想要的效果,您需要创建另一个 canvas 来合成 HTML2Canvas 的输出和绘图 canvas。您需要将 HTML2Canvas 的输出偏移到绘图的位置 canvas,然后从您的绘图 canvas 上绘制图像数据。然后,您可以使用合成 canvas 中的图像数据作为输出。