使用javascript交换带有canvas元素的div [英] swapping div with canvas elements using javascript

问题描述

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

I have 2 div. Every div has a canvas element. At the beginning of my program I put an image on the canvas. The images are different. Then I try to swap the divs using

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

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

;

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

All works except that every canvas is empty. It seems the "contentof..." didn't get the image from the canvas... Anyone knows how to swap the content of the canvas? I am using Firefox.

推荐答案

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

You are serializing to html and reparsing it, this is lossy operation. Instead you should operate on the live DOM tree directly:

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

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

这是一个没有的演示尽管如此，但仍然可以公正地 http://jsfiddle.net/9JdqQ/

Here's a demo that doesn't do justice but nevertheless http://jsfiddle.net/9JdqQ/

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

What's retained compared to serialization are unserializable attributes, event listeners, element data (canvas image etc)..

这篇关于使用javascript交换带有canvas元素的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！