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

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

我有一个应用程序，可以创建画布，让你用鼠标在上面画画。此绘图功能已到位，因此您可以在页面上绘制，就像它们是注释一样，这样，在我可以使用“注释”保存图像或页面后，我可以在其上绘制

到目前为止，我能够保存淹没在画布中的内容，但由于背景不是画布的一部分，我无法将其一起保存。我尝试过使用html2canvas.js进行实验，但在我的例子中不起作用，因为它将DOM对象重新绘制到画布中，而不是将画布下的内容作为最终图像的一部分

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

---

提前多谢

可能是重复的，但我会给你一个非常简短的回答您不能（除非您执行类似html2canvas的操作，将DOM转换到画布元素上）

---

这是故意的。如果可以，这将是一个安全漏洞。脚本不允许用屏幕上的任意内容创建图像。如果你搜索“html画布安全规则”，你会发现更多关于为什么不允许这样做的信息。

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

如果不使用HTML2Canvas之类的库，您就不能这样做，如果可以的话，这将是一个安全漏洞。如果你想要更多的解释，你可以在这里阅读答案。我不认为告诉你“你不能”是一个很好的答案，所以我留下了一条评论。如果“你不能”是真正的答案，我认为作为答案提交没有问题。特别是如果你详细说明为什么你不能@贾温斯是对的。如果不在画布中绘制DOM，则无法完成此操作。但是为什么你不能这样做呢？呃，如果这不是一个重复的问题，那么让它成为一个有公认答案的问题是值得的。不管怎样，其他人现在已经讨论过了。我尝试在没有DOM的情况下这样做，因为它获取了更多我真正需要的内容@阿列克斯福德：非常感谢，这看起来是个不错的工作。我会玩它，看看它是如何运行的。@Patrick Gunderson:我可以根据您使用Html2Canvas的经验来选择您的大脑吗……您使用Html2Canvas渲染Html5+CSS3的效果好吗？我自己，我已经开始了几个小项目，希望Html2Canvas能发挥神奇的作用，但它的结果还不够接近：-/我已经成功地将html+CSS发送到服务器并使用无头浏览器进行渲染。我也更幸运地将信息发送回服务器到无头浏览器。我不认为任何像lib这样的HTML2Canvas都能让你达到你最终想要达到的目标。你也可以做一个浏览器扩展来捕获页面，但这对许多用户来说是一个障碍。这不只是跨域的安全问题吗？如果我提供给你一些内容，我可能已经知道里面有什么，而不需要捕捉它的位图。