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

时间:2010-11-09 18:58:58

标签: html5 canvas base64

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

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

,它就有效

2 个答案:

答案 0 :(得分:9)

您不应该使用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);

答案 1 :(得分:3)

  1. 首先创建一个图像元素&将Image源作为缓存的.DataURL()

  2. 使用图像<img />(我们之前创建的)将图像内容绘制到第二个画布元素

  3. 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
    };