html - 使用base64将 Canvas 图像从一个 Canvas 显示到另一个 Canvas

Question

例如var new = canvas.toDataURL("image/png");

我希望这个新变量中存在的 base64 显示到存在的第二个 Canvas 元素中。但是它不使用 drawimage 方法显示 base64 图像。 如果我使用 say image.png

它会起作用

Answer 1

您不应该使用 base64 来复制 Canvas 。您可以将源 Canvas 传递到目标 Canvas 的上下文方法 drawImage。

否则您将遭受严重的性能损失。在 http://jsperf.com/copying-a-canvas-element 查看我的 jsperf 测试.

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