JIT Spacetree Save Labels as Image

Question

I am using the JavaScript InfoVis Toolkit (http://thejit.org/) and am trying to print my expanded space-tree visualization using canvas.toDataURL("image/png"). While this works for my ForceDirected graph -- in the SpaceTree we have our labels in a separate DIV so when I print the image I get a blank graph.

Does anyone know how to print the labels? Any help would be greatly appreciated. I have attached a manual screenshot of the graph and the image we get when printing.

Yes - I did see the question here -- but it doesnt answer my question as we cannot use "Native" labels because we do some on the fly styling.

HTML Code:

<div id="infovis" style="height: 412px;">
   <div id="infovis-canviswidget" style="position: relative; width: 800px; height: 412px;">
     <canvas id="infovis-canvas" width=800" height="412" style="position: absolute; top: 0px; left: 0px; width: 800px; height: 412px;"></canvas>
     <div id="infovis-label" style="overflow: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px;">
           -- Labels are in here --
     </div>
   </div>
</div>

Manual Screenshot Blank Printed Image

Answer 1

I sort of solved this issue by using html2canvas plugin. Basically, html2canvas will create a new canvas of a div element (with its children) which then you convert to a png image file with myCanvas.toDataURL("image/png"). This image will include your HTML labels. (Beware that html2canvas may not handle properly the labels' CSS properties.)

 html2canvas(document.getElementById("diagram-container"), {
         onrendered: function(canvas) {
         var img = canvas.toDataURL();
         document.write('<img src="'+img+'"/>');
          }
  });