使用背景图像保存画布 [英] Saving Canvas with the background image

问题描述

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

  var canvas = document.getElementById（'your_canvas'）; 
 var context = canvas.getContext（'2d'）; 
 //将canvas图像保存为数据url（默认为png格式）
 var dataURL = canvas.toDataURL（）; 
 
 //将canvasImg图像src设置为dataURL 
 //因此它可以保存为图像
 document.getElementById（'canvasImg'）。src = dataURL; 
  

更新：

我的HTML p>

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

我在HTML页面中有上面的div。然后我动态地创建画布并在其上绘制。这是一个有点冗长的代码。 使用背景图像获取画布 b

  context.globalCompositeOperation =destination-over; 
 drawImage（yourBackgroundImage，0,0）; 
  

I have a HTML5 canvas element with a background image. User is allowed to draw on the image and then need to save the complete canvas element with the background. I'm using below code for saving part but it only gets the canvas drawing but not the background image. what could i do to get the background image also?

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;

Update:

My HTML

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

I have the above div in my HTML page. then i dynamically create the canvas and draw on it. It's a bit lengthy code.

解决方案

To Get the Canvas with backgound Image

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

这篇关于使用背景图像保存画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！