如何将一个canvas的内容复制到另一个canvas本地
我想复制一个canvas的所有内容，并将它们转移到客户端的所有内容。 我会认为我会使用canvas.toDataURL()和context.drawImage()方法来实现这一点，但我遇到了一些问题。
我的解决scheme是获取Canvas.toDataURL()并将其存储在Javascript中的Image对象中，然后使用context.drawImage()方法将其放回。
但是，我相信toDataURL方法返回一个带有"data:image/png;base64,"的64位编码标签。 这似乎不是一个有效的标签，（我总是可以使用一些正则expression式来删除这个），但是是64位编码的string之后的"data:image/png;base64,"子string有效的图像？ 我可以说image.src=iVBORw...ASASDAS ，并在canvas上画回来吗？
我已经看了一些相关的问题： 使用base64将canvas图像从一个canvas显示到另一个canvas
但解决scheme似乎并不正确。
其实你根本不需要创build一个图像。 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上下文作为你的源代码 。 如果您有一个canvas描画上下文，而不是从其创build的canvas元素，则会在context.canvas下的上下文中引用原始canvas元素。
这里是一个jsPerf来演示为什么这是克隆一个canvas的唯一正确的方法： http : //jsperf.com/copying-a-canvas-element
@ robert-hurst有一个更清晰的方法，但是这个解决scheme可能会在你真正想复制Data Url后复制的地方使用。 示例：当您构build使用大量图像/canvas操作的网站时。
// 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;
我设法得到它的工作，我所做的似乎是正确的：
testImage = new testImage(); testImage.src = data:image/png;base64,iVBORw0KG......kSZIkSZIkSZI0u/1/diDteJCiN80AAAAASUVORK5CYII=
（上面的URL是一个例子）
context.drawImage(testImg,0,0);
当我在Chrome和FireBug的控制台上运行它时，这似乎工作
