javascript - 从 Canvas 合成创建图像

Question

我有一个由 10 个不同图像组成的 Canvas 组合。这些图像从一个 xml 文件中获取数据，该文件具有一个坐标列表，在将每个图像放到 Canvas 上时为每个图像创建一个蒙版。

然后我尝试将 Canvas 保存为图像

var image = new Image();
image.src = canvas.toDataURL("image/png");

然而，图像变成完全空白，并且没有任何错误。检查出现的图像后，src 是:

   data:image/png;base64,iVBORw0KGgoAAAANS...ICxjqAABQ+0HCBAgQIBAWMQ4CcQAAAAAElFTkSuQmCC (shortened)

当从不同域提取文件时，我阅读了所有关于安全问题、受污染 Canvas 等的信息，但我没有收到任何错误，而且我使用的所有内容都托管在本地 (http://localhost)

关于如何调试它有什么想法吗？

编辑:我更感兴趣的是在浏览器中将其显示为图像，然后担心稍后保存它。但是，如果将它“保存”到本地存储然后显示它有效，那么我对此感到失望。

Answer 1

您确定在绘制 Canvas 后调用 toDataUrl 吗？您确定无论将新图像附加到 DOM，它都将以适当的宽度/高度/不透明度可见吗？