在我的画布下捕获图像的一部分

Question

我想要做的是，当我保存画布中的内容时，将页面中的画布对象作为图像的一部分。

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

到目前为止，我能够保存淹没在画布中的东西，但是由于背景不是画布的一部分，所以我无法将它保存在一起。我尝试过使用html2canvas.js，但是它在我的例子中行不通，因为它需要DOM对象将它们重画到画布中，如果最终的图像是部分的话，就不需要只使用画布下面的内容。

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

提前谢谢！

Answer 1

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

Answer 2

可能是重复的，但我将给您一个非常简短的答案；您不能(除非您做了类似于html2canvas的操作，其中它将DOM转换到一个画布元素上)

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