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

Question

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

我有一个创建画布的应用程序，可以用鼠标绘制它。这个绘图功能已经到位，所以你可以在页面上绘制就像它们是笔记一样，所以在我可以使用＆＃34;笔记＆＃34;保存图像或页面之后。我借鉴它。

到目前为止，我能够保存画布中淹没的内容，但因为背景不是画布的一部分，所以我无法将它们保存在一起。我尝试过使用html2canvas.js，但它在我的情况下不起作用，因为它将DOM对象重新绘制到画布中，它不会仅仅取决于画布下的内容。图像。

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

提前多多感谢！

Answer 1

可能是重复，但我会给你一个非常简短的回答; 你不能（除非你做像html2canvas这样的东西，它将DOM转换为canvas元素）

这是设计的。如果你可以那将是一个安全漏洞。不允许脚本在人物屏幕上的任意内容中创建图像。如果您搜索“html canvas安全规则”，您将找到有关禁止此操作的更多信息。

Answer 2

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