E.g。 var new = canvas.toDataURL("image/png");
我希望这个新变量中存在的base64显示在第二个canvas元素中。但它不使用drawimage方法显示base64图像。
如果我使用说image.png
答案 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)
首先创建一个图像元素&将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
};