HTML5 Canvas 将绘图保存为图像答案

【问题标题】：HTML5 Canvas Save Drawing as an ImageHTML5 Canvas 将绘图保存为图像
【发布时间】：2016-07-02 00:37:14
【问题描述】：

我有一个关于将 png 保存到画布的问题。它为我保存了一张照片，但它为我保存了绘画的内容。当我加载不再看到的背景时。

var dataURL = this.canva.toDataURL();
document.getElementById(id).src = dataURL;

背景图片我已经写出来了

 function leapController()
        {
            var tracks = new Array();
            tracks[0] = {link: 'png/1.png'};
            tracks[1] = {link: 'png/2.png'};
            tracks[2] = {link: 'png/3.png'};
            tracks[3] = {link: 'png/4.png'};
            tracks[4] = {link: 'png/5.png'};

我想注册我的整个图像以及背景和绘图元素

【问题讨论】：

背景不是用.toDataURL 导出的。要同时获取背景，请先在画布中使用drawImage 绘制背景。
好的，我理解并帮我改一下？
如果有人能帮我更改画布上的曲目？

标签： javascript html canvas

【解决方案1】：

您在问题中提供了宝贵的少量代码，但我们的想法是，当您准备好保存画布时，您可以使用合成来在现有像素后面绘制背景图像。

为了让你开始......这里有一些代码应用这个想法：

function save(desiredBackgroundIndex){

    // set context compositing to draw behind existing pixels
    context.globalCompositeOperation='destination-over';

    // Draw the desired background on the canvas BEHIND existing pixels
    // Assumes tracks[] is in scope
    context.drawImage(tracks[desiredBackgroundIndex],0,0);

    // always clean up! Change compositing mode back to default
    context.globalCompositeOperation='source-over';

    // set #id's src to the canvas's data url
    document.getElementById(id).src = this.canva.toDataURL();

}

// USAGE example: add png/3.png to the canvas and save the canvas's data url to #id
save(2);

【讨论】：