javascript - 如何下载带有背景图像的 Canvas ？

Question

我有一个 Canvas 元素，我正在通过代码动态设置背景。然后我使用 Sketch 库 ( http://intridea.github.io/sketch.js/ ) 在 Canvas 上绘图。 - 这一切都有效。

但是，每当我尝试使用 canvas.toDataURL("image/png") 转换 Canvas 时，它都能保存 Canvas 绘图，但不会保存背景。 - 我知道这是按设计工作的。

有没有办法合并两者？我在玩弄我可以在完成绘图后将图像 src 设置为背景 src 并尝试导出它的想法，但我不确定。有没有人有这方面的经验？

Answer 1

正如您所发现的， Canvas 及其背景是分开维护的，toDataURL 不会同时捕获背景。

您可以使用 Canvas 合成将背景与素描结合起来。

'destination-over' 合成模式可以让你在草图后面绘制背景

context.globalCompositeOperation="destination-over";

context.drawImage(backgroundImage,0,0);

现在背景像素已经绘制在您的草图后面，并且都将使用 toDataURL 进行捕获。