如何将一个画布的内容本地复制到另一个画布

实际上，您根本不必创建图像。 drawImage() 将接受 Canvas 和 Image 对象。

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
    
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

比使用 ImageData 对象或 Image 元素快得多。

请注意，sourceCanvas 可以是 HTMLImageElement、HTMLVideoElement 或 HTMLCanvasElement。正如 Dave 在此答案下方的评论中所提到的，您不能使用画布绘图上下文作为来源。如果您有一个画布绘图上下文而不是创建它的画布元素，则在 context.canvas 下的上下文中有对原始画布元素的引用。

这是一个 jsPerf 来演示为什么这是克隆画布的唯一正确方法：http://jsperf.com/copying-a-canvas-element

---

@robert-hurst 有一个更干净的方法。

但是，也可以在复制后确实希望拥有 Data Url 副本的地方使用此解决方案。例如，当您构建一个使用大量图像/画布操作的网站时。

    // select canvas elements
    var sourceCanvas = document.getElementById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;

---