保存具有背景圖像的畫布

我有一個具有背景圖像的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。然後我動態地創建畫布並在其上繪製。這是一個有點冗長的代碼。

來源

2013-03-14 chamara

你需要把''

在允許用戶在畫布上繪製之前，您是否在畫布上繪製背景圖像？ – 2013-03-14 09:24:03

@Swarnendu我已經更新了這個問題 – chamara 2013-03-14 09:54:53

要與backgound圖像獲取畫布

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

來源

2013-03-14 05:04:02 markE

不要在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 callback，al低用戶在畫布上繪製...

現在保存畫布繪製....

來源

2013-03-15 18:53:10

保存具有背景圖像的畫布

回答

相關問題