用背景图像保存画布

Question

我有一个带有背景图像的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>

我有上面的div在我的HTML页面。然后我动态地创建画布并在其上绘制。这是一个有点长的代码。

Answer 1

不要在div上使用图像，请在画布上绘制图像。

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

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回调完成图像绘制后，允许用户在画布上绘制...

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