拷贝画布其他画布

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)) 
}