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 Blank printing image

Sorry it took me a bit to post what I did to solve the problem -- I had to go back and find my code. See my solution below. Its not a perfect solution -- but it worked better than the alternative. — bharris9, Jan 16 '13 at 17:30

score 1 · Answer 1 · answered Jun 06 '13 at 21:56

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

The current version of the html2canvas library supports basic CSS transformations. — Paulino III, Oct 01 '13 at 18:34

score 0 · Answer 2 · answered Jan 16 '13 at 17:35

I should have posted this back in October when I found it -- but it slipped my mind. I was able to find an answer to my own question.

First check out the post here HTML 5 Canvas Save Image

Here is how I implemented the solution (get CanvasSaver function code from link above):

function SaveCanvas(canvasName) {
  var canvas = document.getElementById(canvasName);
  var imgUrl = null;

  if (canvas.getContext) {
    //Get alternative image URL for spacetree only
    if (canvasName.indexOf("tag") == -1) {
        imgUrl = $jit.ST.prototype.print.call();
    }

    var cs = new CanvasSaver('http://joeltrost.com/php/functions/saveme.php');
    //cs.saveJPEG(canvas, 'image');
    cs.savePNG(canvas, 'image', imgUrl);
  }
}

Finally -- code your ASP button to call the SaveCanvas function:

<asp:ImageButton ID="ImageButton1" ImageUrl="Images/save_icon.png" ToolTip="Save Visualization" AlternateText="Save Visualization" OnClientClick="SaveCanvas('tagCloudVis-canvas');return false;" Style="left: 2px; top:3px; position:relative;" runat=server />

score 0 · Answer 3 · answered Jan 06 '17 at 07:36

I know this thread is old. But, in case anyone is looking for this and do not want to use html2canvas. here is a solution for you guys.

         Label: {
            type: 'Native'
        },

Add the above in your javascript code var st = new $jit.ST({ <here> })

To save it as a image, add the following code.

HTML:

<a onclick="getImage(this, 'filename.png', 'tree-id')">download tree</a>

JS:

function getImage(a, filename, id){
 a.link = document.getElementById(id).toDataURL();
 a.download = filename;
}

Happy Coding :)

JIT Spacetree Save Labels as Image

3 Answers3