用背景图像保存画布

Question

我有一个画布的背景图像,并在画布上添加了一些基本元素.现在我想用画布样式的背景图像保存画布(在.png中).

尝试:

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

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

Answer 1

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

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

Answer 2

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

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

第一个画布调用是您的变量，第二个调用是画布对象。您可能应该将变量重命名为唯一的名称。

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

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

更新以重新绘制图像。