JIT Spacetree将标签保存为图像

Question

我正在使用JavaScript InfoVis Toolkit(http://thejit.org/)并尝试使用打印扩展的空间树可视化 canvas.toDataURL("image/png").虽然这适用于我的ForceDirected图形 - 在SpaceTree中,我们将标签放在单独的DIV中,因此当我打印图像时,我得到一个空白图形.

有谁知道如何打印标签？任何帮助将不胜感激.我附上了图表的手动屏幕截图和打印时获得的图像.

是的 - 我确实在这里看到了这个问题- 但它没有回答我的问题,因为我们不能使用"原生"标签,因为我们在飞行造型上做了一些.

HTML代码:

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

手动截图 空白的印刷图像

Answer 1

当我十月份发现它时，我本应该把它发布出来的——但我忘记了。我能够找到自己问题的答案。

首先查看这里的帖子HTML 5 Canvas Save Image

以下是我实现该解决方案的方法（从上面的链接获取 CanvasSaver 功能代码）：

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);
  }
}

最后，编写 ASP 按钮来调用 SaveCanvas 函数：

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