Question

我遇到了问题，我不知道如何解决问题，也不知道为什么会这样做，所以我正在寻求帮助

我目前正在开发一个小应用程序： 1 - 在单个画布上一起构建* .png 2 - 应用一些样式，颜色

当前的应用程序正在运行＆＃34;完美＆＃34; ：最终画布包含具有正确资源的完整构建图像，我们可以看到结果。

今天，我决定从画布中提取base64来渲染实际图像。问题是在时间t提取的base64与canvas标签本身包含的base64不同。结果，最终渲染不一样（图像的某些部分在图像中被擦除，同时最终的画布非常精细）。

以下是管理绘图的代码：

ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
//images.forEach(function(child, index, array) {
//    ctx.drawImage(picture, child.anchor.x, child.anchor.y, child.width, child.height);
//});
ctx.restore();
console.log(ctx.canvas.toDataURL("image/png"));

如果我尝试使用谷歌Chrome控制台从画布最终从画布中提取base64并将其存储为目标图像的来源，它也可以正常工作。这是我的问题：当画布完全准备就绪时，是否有任何事件被触发？尝试在ctx.restore（）后提取base64，我做错了吗？

非常感谢你的帮助，

友善（对我糟糕的英语感到抱歉）

编辑1：我使用的功能允许我进行一些预渲染，这就是为什么上面的代码中只有drawImage，因为预渲染已经完成。

Answer 1

谢谢大家的意见！我想首先为可怕的问题道歉，这个问题真的很糟糕......

感谢Blindman67，我确实找到了问题所在。我之前没有说过的（因为我认为这不是问题的一部分）是我的程序也用其他颜色“替换”颜色。因此，它必须处理更多的Image.load（）回调以使用它们的最终颜色打印不同的图像。它认为一个或多个load（）函数没有完全填满，导致框架不完整。我设法更改导出，以便在尝试导出最终图像之前，每个回调都能达到目的。

非常感谢大家的帮助：）

有没有办法在画布完成时检查？

1 个答案: