Question

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

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

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

Answer 1

如何在画布中添加背景？你在css中设置它作为背景图像吗？或者您是将图像直接添加到画布？根据示例here，我认为您需要执行后者。

Answer 2

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

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

＆＃39;目的地＆＃39;合成模式可让您在草图背后绘制背景

context.globalCompositeOperation="destination-over";

context.drawImage(backgroundImage,0,0);

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

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

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

3 个答案: