<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>
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+'"/>');
});
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