如何下载带有背景图像的画布？答案

【问题标题】：How to download canvas with background image?如何下载带有背景图像的画布？
【发布时间】：2018-08-16 22:00:59
【问题描述】：

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

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

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

【问题讨论】：

如何设置背景？也许你应该先在画布中绘制背景，如果绘图
我通过 jQuery 中的背景 url 属性设置它

标签： javascript css html5-canvas

【解决方案1】：

正如您所发现的，画布及其背景是分开维护的，toDataURL 也不会捕获背景。

您可以使用画布合成将背景与草图相结合。

“destination-over”合成模式可让您在草图背后绘制背景

context.globalCompositeOperation="destination-over";

context.drawImage(backgroundImage,0,0);

现在背景像素已经在你的草图后面绘制好了，两者都将被 toDataURL 捕获。

【讨论】：

【解决方案2】：

是的，你是对的。我将背景图像与画布图像一起获取并下载。

 ctx.width = 2503;
    ctx.height = 250;
    ctx.globalCompositeOperation="destination-over";
    var background = new Image();
    background.src = "http://localhost/xxxxx/xxxxx/xxxxx/xxxxx/ecg_back.png";   
    ctx.drawImage(background, 0, 0);
    // create pattern
    var ptrn = ctx.createPattern(background, 'repeat'); // Create a pattern with this image, and set it to "repeat".
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, ctx.width, ctx.height);

【讨论】：

【解决方案3】：

你是如何将背景添加到画布上的？您是否将其设置为css作为背景图像？还是直接将图像添加到画布？我认为你需要做后者，根据示例here。

【讨论】：

我通过 jQuery 背景 url 属性设置它。编辑：我尝试按照该示例进行操作，但是当我单击开始在图像上绘图时，它会清除图像并开始绘图，这就是导致我转到背景 url 路由的原因。