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

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代替。