визуализировать один div и его интерактивный контент, нажав на другой div

<div id="1" class="aaa" style="position: relative; left: 50px; top: 50px; width: 300px; height: 200px; border: solid 1px; background: #dddddd; overflow: hidden;">
    <div style="position: relative; left: 30px; top: 25px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='red';"></div>
    <div style="position: relative; left: 160px; top: 70px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='orange';"></div>
</div>
<div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;">click</div>

http://jsfiddle.net/FWyBQ/

У меня есть один div (id = "1" class= "aaa"), который содержит несколько интерактивных div. Состояние этого интерактивного контента должно отображаться как изображение (gif?) С щелчком на другом div (id = "2" class= "bbb").

Это изображение желательно открыть в новой вкладке или окне. Или, может быть, просто щелкните правой кнопкой мыши> сохранить как на месте.

ps Я знаю о сценариях, таких как html2canvas и phantomjs, но я понятия не имею, как их реализовать в моем случае.

редактировать:

Теперь я пытаюсь реализовать это решение, которое с небольшой настройкой должно работать с process.js(http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min. js).

Я думаю, мне нужен только правильный код jquery с обработкой. Js, чтобы получить нужные мне функциональные возможности. Я пробовал это, и он не работает:

$('.bbb').click(function (e) {
        var canvas = document.getElementById("1"),
            img    = canvas.toDataURL("image/png");
        $('.aaa').document.write('<img src="'+img+'"/>');
    });