Question

E.g。 var new = canvas.toDataURL("image/png");

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

，它就有效

Answer 1

您不应该使用base64来复制画布。您可以将源画布传递到目标画布的上下文方法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);

Answer 2

首先创建一个图像元素＆amp;将Image源作为缓存的.DataURL()源
使用图像<img />（我们之前创建的）将图像内容绘制到第二个画布元素

E.g：

window.onload = function() { 
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');
    var ctx1    = canvas1.getContext('2d');
    var ctx2    = canvas2.getContext('2d');

    var src     = canvas.toDataURL("image/png"); // cache the image data source

    var img     = document.createElement('img'); // create a Image Element
    img.src     = src;   //image source

    ctx2.drawImage(img, 0, 0);  // drawing image onto second canvas element
};

使用base64将画布图像从一个画布显示到另一个画布

2 个答案: