Question

我想复制一个画布的所有内容并将它们转移到客户端的所有内容。我认为我会使用canvas.toDataURL()和context.drawImage()方法来实现这一点，但我遇到了一些问题。

我的解决方案是获取Canvas.toDataURL()并将其存储在Javascript中的Image对象中，然后使用context.drawImage()方法将其放回。

但是，我相信toDataURL方法会返回一个前缀为"data:image/png;base64,"的64位编码标记。这似乎不是一个有效的标签，（我总是可以使用一些RegEx来删除它），但是"data:image/png;base64,"子串后有效图像是64位编码的字符串吗？我可以说image.src=iVBORw...ASASDAS，然后在画布上画回来吗？

我看了一些相关的问题： Display canvas image from one canvas to another canvas using base64

但解决方案看似不正确。

Answer 1

实际上，您根本不需要创建图像。 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在此答案下面的评论中所提到的，您无法使用画布绘图上下文作为源。如果您有一个画布绘制上下文而不是它创建的canvas元素，则在context.canvas下的上下文中会引用原始canvas元素。

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

Answer 2

@ robert-hurst有一个更干净的方法，但是这个解决方案可能会在您真正希望在复制后拥有Data Url副本的地方使用。示例：当您构建使用大量图像/画布操作的网站时。

    // select canvas elements
    var sourceCanvas = document.getElementsById("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 3

我设法让它工作，我所做的似乎是正确的：

testImage = new testImage();
testImage.src = data:image/png;base64,iVBORw0KG......kSZIkSZIkSZI0u/1/diDteJCiN80AAAAASUVORK5CYII=

（以上网址为例）

context.drawImage(testImg,0,0);

当我在Chrome和FireBug中的控制台上运行它时，这似乎有效。

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

3 个答案: