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

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

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

;

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

Answer 1

你正在序列化到HTML并重新解析它，这是有损操作。 相反，您应该直接在实时DOM树上操作：

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

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

与序列化相比，保留的是不可序列化的属性，事件监听器，元素数据（canvas图像等）。

Answer 2

如果你只是使用图像在canvas上绘制，那么真的不需要canvas – 你可以直接使用图像并交换它们。

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

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

使用新canvas作为交换的一个选项：

 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