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>

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

Answer 1

使用背景图片获取画布

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

Answer 2

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

现在保存画布图....

用背景图像保存画布

2 个答案: