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

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

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

但是，我相信 toDataURL方法返回一个64位编码的标记，并在其前面加上 "data:image/png;base64,"。这似乎不是一个有效的标记，(我总是可以使用一些正则表达式删除这一点) ，但64位编码字符串后的 "data:image/png;base64,"子字符串是一个有效的图像？我能说 image.src=iVBORw...ASASDAS然后把这个画回画布上吗？

我研究了一些相关问题: 使用 base64将画布图像从一个画布显示到另一个画布

但解决方案似乎并不正确。

147614 次浏览
小开
最佳答案

实际上你根本不需要创建一个图像。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或 元素。正如 戴夫在这个答案下面的评论中提到的，你 不能使用画布绘图上下文作为源。如果您有一个画布绘制上下文，而不是创建它的画布元素，那么在 context.canvas下的上下文中有一个对原始画布元素的引用。

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

小开

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

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

    // 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;

提交答案