0

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

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

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

;

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

4

2 回答 2

2

您正在序列化为 html 并重新解析它，这是有损操作。相反，您应该直接对实时 DOM 树进行操作：

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

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

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

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

于 2013-06-24T15:53:41.957 回答
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);

使用图像元素作为交换的另一种方法：

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;

后者的速度不是最佳的，因为您需要压缩和编码 data-uri。

请注意，此示例假定图像具有相同的大小。如果图像的大小不同，您还需要在图像被复制到交换之后和重绘之前将 canvas1 和 2 设置为正确的大小来处理这个问题。

swap = canvas1
resize canvas1 = canvas2
draw canvas2 to canvas1
resize canvas2 = swap
draw swap to canvas2
于 2013-06-24T23:50:21.540 回答