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

Question

我想复制一个画布上的所有内容，然后将它们全部传输到客户端上的所有内容。我认为我会使用canvas.toDataURL()and context.drawImage()方法来实现这一点，但是我遇到了一些问题。我的解决方案是将其获取Canvas.toDataURL()并存储在Javascript中的Image对象中，然后使用该context.drawImage()方法将其放回原处。但是，我相信该toDataURL方法会返回一个带有64位编码标签的标签"data:image/png;base64,"。这似乎不是一个有效的标签，（我总是可以使用一些RegEx删除它），但是"data:image/png;base64,"子字符串之后的64位编码字符串是否是有效的图像？我可以说image.src=iVBORw...ASASDAS，然后在画布上画出来吗？我研究了一些相关问题： 使用base64将画布图像从一个画布显示到另一个画布但是解决方案似乎并不正确。

Answer 1

但是，在复制后实际上想要复制数据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;

Answer 2

有一个小点让我震惊：虽然您可以绘制画布（HTMLCanvasElement），但不能绘制上下文（CanvasRenderingContext2D）。使用myContext.canvas代替。