使用背景图像保存画布答案

【问题标题】：Saving Canvas with the background image使用背景图像保存画布
【发布时间】：2013-03-02 08:12:15
【问题描述】：

我有一个带有背景图像的 HTML5 画布元素。允许用户在图像上绘图，然后需要将完整的画布元素与背景一起保存。我正在使用下面的代码来保存部分，但它只获取画布绘图而不是背景图像。我还能做些什么来获取背景图片？

var canvas = document.getElementById('your_canvas');
             var context = canvas.getContext('2d');
             // save canvas image as data url (png format by default)
             var dataURL = canvas.toDataURL();

             // set canvasImg image src to dataURL
             // so it can be saved as an image
             document.getElementById('canvasImg').src = dataURL;

更新：

我的 HTML

<div name='coords1' class='canvas-area input-xxlarge' disabled
placeholder='Shape Coordinates' id='imgDiv'
data-image-url='BackGround.jpg'></div>

我的 HTML 页面中有上述 div。然后我动态创建画布并在其上绘制。代码有点长。

【问题讨论】：

你需要把背景图片带入<canvas>，然后你就可以得到canvas绘图和bkg图片了。
在允许用户在画布上绘图之前，您是否在画布上绘制背景图像？
@Swarnendu 我已经更新了问题

标签： javascript html canvas html5-canvas

【解决方案1】：

不要在div上使用图像，在canvas上绘制图像..

使用以下代码在画布上绘制图像，

var img=new Image();
img.src=/*image src*/;
var ctx=canvas.getContext("2d");
img.onload=function()
{
    ctx.drawImage(img,x,y,width,height);
}

在img.onload回调完成图像绘制后，允许用户在画布上绘制...

现在保存画布绘图....

【讨论】：

【解决方案2】：

获取带有背景图片的画布

context.globalCompositeOperation="destination-over";
drawImage(yourBackgroundImage,0,0);

【讨论】：