拷貝畫布其他畫布

Question

我使用此功能複製舊帆布新建畫布

function cloneCanvas(oldCanvas) { 

     //create a new canvas 
     var newCanvas = document.createElement('canvas'); 
     var context = newCanvas.getContext('2d'); 

     //set dimensions 
     newCanvas.width = oldCanvas.width; 
     newCanvas.height = oldCanvas.height; 

     //apply the old canvas to the new one 
     context.drawImage(oldCanvas, 0, 0); 

     //return the new canvas 
     return newCanvas; 
    } 

我用這樣

  var oldCanvas = $(this).parent().parent().find('td:first-child canvas') 

      $("div.previewImg").append(cloneCanvas(oldCanvas)) 

這個功能，但我得到這個錯誤:(

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided 

請幫助我，我該如何解決這個錯誤

謝謝

Answer 1

首先要確保你得到一個元素，而不是一個陣列中使用：

$(this).parent().parent().find('td:first-child canvas').first(); 

二：

將圖像數據從一個數組複製使用toDataUrl()：

canvasDataImg = oldCanvasContext.toDataURL("image/png"); 

然後畫到新的畫布上。

Answer 2

var oldCanvas = $(this).parent().parent().find('td:first-child canvas')[0]; 
if(oldCanvas){ //Check if the element is present 
    $("div.previewImg").append(cloneCanvas(oldCanvas)) 
}