Question

我有一个画布的背景图像，并在画布中添加了一些基本元素。现在我想用画布样式的背景图像保存画布（在.png中）。

尝试：

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

但这似乎并没有保存画布的背景图像。有出路吗？

Answer 1

如果要将Canvas +背景保存为图像，则需要执行一系列事件：

创建与普通画布一样大的内存中画布。叫它can2
ctx2.drawImage(can1, 0, 0) //将第一个画布绘制到新画布上
ctx.clearRect(0, 0, width, height) //清除第一个画布
ctx.drawImage(background, 0, 0) //在第一个画布上绘制图像
ctx.drawImage(can2, 0, 0) //将（已保存的）第一个画布绘制回自身

Answer 2

要保存图片位置，我相信您正在寻找：

window.location = canvas.canvas.toDataURL('image/png');

第一个canvas调用是你的变量，第二个是canvas对象。您应该将变量重命名为唯一的。

要在画布中设置图像，并使背景需要更多工作：

var myCanvas = document.querySelector('myCanvas'),     
    img = document.createElement('img'),    
    ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;

    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
    img.onload = function () {  
        ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
    };
img.src = 'image.png';

更新以重绘图像。

用背景图像保存画布

2 个答案: