我想复制一个画布上的所有内容，然后在客户端将它们全部转移到另一个画布上。我认为我会使用canvas.toDataURL()and context.drawImage()方法来实现这一点，但是我遇到了一些问题。
canvas.toDataURL()
context.drawImage()
我的解决方案是将其获取Canvas.toDataURL()并存储在Javascript中的Image对象中，然后使用该context.drawImage()方法将其放回原处。
Canvas.toDataURL()
但是，我相信该toDataURL方法会返回一个带有64位编码标签的标签"data:image/png;base64,"。这似乎不是一个有效的标签，（我总是可以使用一些RegEx删除它），但是"data:image/png;base64,"子字符串之后的64位编码字符串是否是有效的图像？我可以说一下image.src=iVBORw...ASASDAS，然后将其画在画布上吗？
toDataURL
"data:image/png;base64,"
image.src=iVBORw...ASASDAS
但是解决方案似乎并不正确。
实际上，您根本不需要创建图像。drawImage()将接受一个Canvas和一个Image对象。
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元素更快。
ImageData
请注意，sourceCanvas可以是HTMLImageElement，HTMLVideoElement或HTMLCanvasElement。正如Dave在此答案下方的评论中提到的那样，您 不能将canvas绘图上下文用作源 。如果您有一个画布绘图上下文而不是其创建的画布元素，则在上下文中有对原始画布元素的引用context.canvas。
sourceCanvas
context.canvas
