render one div and it's interactive content by clicking on another div

Question

<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/

I have one div (id="1" class="aaa") which contains multiple interactive divs. State of this interactive content should be able to be rendered as image (gif?) with the click on the other div (id="2" class="bbb").

That image should preferably be opened in a new tab or window. Or maybe just right click > save as in place.

p.s. I am aware of scripts like html2canvas and phantomjs, but I have no idea how to implement them in my case.

edit:

Now I'm trying to implement this solution, which with a little tweaking should work with processing.js (http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js).

I guess I just need the right jquery code with processing.js in order to achieve the functionality I need. I've tried this and it doesn't work:

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

Answer 1

You could use html2canvas for this; include the html2canvas library in your page and try something like this:

  //element would be your aaa div
  html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the resulting canvas generated from the element
        var url = canvas.toDataURL("image/png");
    }
  });

You would then need to post the value of 'url' to a PHP script like in one of the answers to this question.

EDIT

The reason your new code doesn't work is because the element with an id of "1" is not a canvas element. Its a div.

Canvas methods like toDataUrl() can only be called on Canvas elements (which is why I suggested using html2canvas to change your div into a Canvas.)

I've forked your jsfiddle to show how the code could work if the element with id "1" was a canvas:

http://jsfiddle.net/_Pez/cksGt/1/

_Pez

Answer 2

If I was in your pants, I'd start by switching the first div to SVG notation. It's not that different and there are a ton of ways to export an svg object to png.

This should get you started

<svg id="1" class="aaa" width="400" height="250">
     <g>
        <rect id="svg_0" height="200" width="300" y="50" x="50" stroke-width="1" stroke="#000000" fill="#dddddd"/>
        <rect id="svg_1" height="50" width="100" y="75" x="80" stroke-width="5" fill="blue"/>
        <rect id="svg_2" height="50" width="100" y="120" x="210" stroke-width="5"  fill="blue"/>
    </g>
</svg>

<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>