如何从一个canvas复制到其他canvas

这是jsfiddle

我有这个作为我的源canvas

HTML

Source Canvas
  
Destination Canvas
  

JavaScript的

  var sourceImage, ctx, sourceCanvas, destinationCanvas; //get the canvases sourceCanvas = document.getElementById('source'); destinationCanvas = document.getElementById('destination'); //draw the source image to the source canvas ctx = sourceCanvas.getContext('2d'); function start() { ctx.drawImage(img1, 0, 0); ctx.globalCompositeOperation = "source-atop"; var pattern = ctx.createPattern(img, 'repeat'); ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height); ctx.fillStyle = pattern; ctx.fill(); ctx.globalAlpha = .10; ctx.drawImage(img1, 0, 0); ctx.drawImage(img1, 0, 0); ctx.drawImage(img1, 0, 0); //ctx.globalAlpha = 1; } var img1 = new Image(); var img = new Image(); img.onload = function () { img1.onload = function () { start(); } img1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png"; } img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png"; 

我想在我的目标canvas中显示源canvas中的内容。

我累了

 var image, destinationCtx; //create the image image = new Image(); //get the base64 data image.src = sourceCanvas.toDataURL('image/png'); //get the destination context destinationCtx = destinationCanvas.getContext('2d'); //copy the data destinationCtx.drawImage(image, 0, 0); //done 

但没有运气。 我错过了什么吗？ 通过imageData复制，通过Base64数据复制，通过直接绘制复制任何方法都可以完成我的工作。 当我尝试

http://jsperf.com/copying-a-canvas-element它复制但是当我把我的源canvas作者它不起作用？ 我错过了什么吗？

Answer 1

您可以直接将一个canvas复制到其他canvas上 像这样…

 var destinationCtx; //get the destination context destinationCtx = destinationCanvas.getContext('2d'); //copy the data destinationCtx.drawImage(sourceCanvas, 0, 0); 

Answer 2

您可以使用源canvas中的getImageData和putImageData到目标canvas。与其他方法相比，这是最快的。

 var sourceCtx, destinationCtx, imageData; sourceCtx = sourceCanvas.getContext('2d'); destinationCtx = destinationCanvas.getContext('2d'); imageData = sourceCtx.getImageData(0, 0, sourceCanvas.width - 1, sourceCanvas.height - 1); destinationCtx.putImageData(imageData, 0, 0); 

来源：/ https://jsperf.com/copying-a-canvas-element