我有2个div。每个div都有一个canvas元素。在我的程序开始时,我在画布上放了一个图像。图像不同。然后我尝试使用
交换div var contentofmyfirstdiv = $('#myfirstdiv').html();
var contentofmyseconddiv = $('#myseconddiv').html();
$('#myseconddiv').html(contentofmyfirstdiv);
$('#myfirstdiv').html(contentofmyseconddiv)
所有作品除了每个画布都是空的。似乎“contentof ...”没有从画布中获取图像......任何人都知道如何交换画布的内容?我正在使用Firefox。
答案 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