用背景图像保存画布 [英] Save Canvas with Background Image

问题描述

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

I have a background image for a canvas, and added a few basic elements to the canvas. Now I want to save the canvas (in .png), with the background image of the canvas style.

尝试：

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

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

But this doesn't seem to save the background image of the canvas. Is there a way out?

推荐答案

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

To save an image location, I believe your looking for:

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

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

The first canvas call is your variable the second is the canvas object. You should probably rename your variable to something unique.

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

To set an image in canvas and make that the background requires some more work:

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

更新以重绘图像。

这篇关于用背景图像保存画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！