JIT Spacetree Save Shortcuts As Image

Question

I use the JavaScript InfoVis Toolkit ( http://thejit.org/ ) and try to print my extended space-tree visualization using canvas.toDataURL("image/png") , although this works for my ForceDirected graph - in SpaceTree we have our labels are in a separate DIV, so when I print the image, I get an empty graph.

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

Yes - I saw the question here - but it does not answer my question, because we can’t use the “Native” tags, because we do some on-the-fly style.

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

Answer 1

I solved this problem using the html2canvas plugin. Basically, html2canvas will create a new canvas for the div element (with its children), which is then converted to a png image file using myCanvas.toDataURL("image/png") . This image will contain your HTML tags. (Beware that html2canvas may not properly handle CSS tag properties.)

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

Answer 2

I was supposed to publish this in October when I found it, but it went crazy. I was able to find the answer to my question.

Read the post here first HTML 5 Canvas Save Image

Here's how I implemented the solution (get the CanvasSaver function code from the 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, the code for 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 /> 

Answer 3

I know this thread is out of date. But, if someone is looking for this and does not want to use html2canvas. here is the solution for you guys.

  Label: { type: 'Native' }, 

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

To save it as an 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 :)