使用javascript交换带有canvas元素的div

时间:2013-06-24 15:12:16

标签: javascript jquery canvas html5-canvas

我有2个div。每个div都有一个canvas元素。在我的程序开始时,我在画布上放了一个图像。图像不同。然后我尝试使用

交换div
    var contentofmyfirstdiv = $('#myfirstdiv').html();
    var contentofmyseconddiv = $('#myseconddiv').html();

    $('#myseconddiv').html(contentofmyfirstdiv);
    $('#myfirstdiv').html(contentofmyseconddiv)

所有作品除了每个画布都是空的。似乎“contentof ...”没有从画布中获取图像......任何人都知道如何交换画布的内容?我正在使用Firefox。

2 个答案:

答案 0 :(得分:2)

您正在序列化为html并重新分析它,这是有损操作。相反,你应该操作 直接在实时DOM树上:

var contentofmyfirstdiv = $('#myfirstdiv').children().detach();
var contentofmyseconddiv = $('#myseconddiv').children().detach();

$('#myseconddiv').append(contentofmyfirstdiv);
$('#myfirstdiv').append(contentofmyseconddiv)

这是一个不公正的演示,但http://jsfiddle.net/9JdqQ/

与序列化相比,保留的是不可序列化的属性,事件监听器,元素数据(画布图像等)..

答案 1 :(得分:1)

如果你只是在画布上使用图像画画,那么画布真的不需要 - 你可以直接使用图像并交换它们。

但是,如果由于其他原因需要使用画布,则可以直接从一个画布中提取数据,将另一个画布绘制到此画布,然后将数据从第一个添加到第二个。

此方法显示了一种不需要DOM操作的方法。

使用新画布作为交换的一个选项:

var temp = document.createElement('img');
temp.width = canvas1.width;
temp.height = canvas1.height;

//swap
var tempctx = temp.getContext('2d');
tempctx.drawImage(canvas1, 0, 0);

ctx1.drawImage(canvas2, 0, 0);
ctx2.drawImage(temp, 0, 0);

使用image元素作为交换的另一种方法:

var temp = canvas1.toDataURL();
ctx1.drawImage(canvas2, 0, 0);

var img = document.createElement('img');
img.onload = function() {ctx2.drawImage(this, 0, 0);}
img.src = temp;

后者在速度方面不是最佳的,因为您需要压缩和编码数据uri。

请注意,此示例假设图像大小相同。如果图像大小不同,您需要在将图像复制到交换后和重绘之前将canvas1和2设置为正确的大小。

swap = canvas1
resize canvas1 = canvas2
draw canvas2 to canvas1
resize canvas2 = swap
draw swap to canvas2