[英]Saving Canvas with the background image
我有一个带有背景图像的HTML5 canvas元素。 允许用户在图像上绘制,然后需要将完整的canvas元素与背景一起保存。 我正在使用下面的代码来保存零件,但它仅获取画布图形,而不获取背景图像。 我也该怎么做才能得到背景图像?
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。 然后我动态创建画布并在其上绘制。 代码有点长。
不要在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
回调中完成图像绘制后,允许用户在画布上绘制...
现在保存画布图纸。
使用背景图像获取画布
context.globalCompositeOperation="destination-over";
drawImage(yourBackgroundImage,0,0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.