如何下载带有背景图片的画布？

Question

我有一个canvas元素，可以通过代码动态设置背景。 然后，我使用Sketch库（ http://intridea.github.io/sketch.js/ ）在画布上绘制。 -全部都可以。

但是，每当我尝试使用canvas.toDataURL（“ image / png”）转换画布时，它都可以保存画布图形，但是不会保存背景。 -我知道这是按设计进行的。

有没有办法将两者合并？ 我想弄清楚我可以在完成绘制并尝试导出后将图像src设置为背景src的想法，但是我不确定。 有人对这个有经验么？

Answer 1

如您所见，画布及其背景是分别维护的，并且toDataURL也不会捕获背景。

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

“目标上方”合成模式可让您在草图后面绘制背景图像

context.globalCompositeOperation="destination-over";

context.drawImage(backgroundImage,0,0);

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

Answer 2

您如何将背景添加到画布？ 您是否在CSS中将其设置为背景图像？ 还是将图像直接添加到画布？ 我认为您需要按照此处的示例进行后者。

Answer 3

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

 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);