JIT Spacetree 将标签另存为图像答案

【问题标题】：JIT Spacetree Save Labels as ImageJIT Spacetree 将标签另存为图像
【发布时间】：2012-10-21 00:41:47
【问题描述】：

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

有人知道如何打印标签吗？任何帮助将不胜感激。我附上了图表的手动截图和打印时得到的图像。

是的——我确实看到了here 的问题——但它没有回答我的问题，因为我们不能使用“原生”标签，因为我们会做一些即时造型。

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>

手动截图空白打印图片

【问题讨论】：

嗨，我正在尝试做同样的事情。你找到解决办法了吗？
抱歉，我花了一点时间才发布我为解决问题所做的工作——我不得不回去寻找我的代码。请参阅下面的解决方案。它不是一个完美的解决方案——但它比替代方案效果更好。

标签： javascript canvas infovis thejit space-tree

【解决方案1】：

我知道这个帖子很旧。但是，如果有人正在寻找这个并且不想使用 html2canvas。这是给你们的解决方案。

         Label: {
            type: 'Native'
        },

在您的 javascript 代码中添加上述内容var st = new $jit.ST({ <here> })

要将其保存为图像，请添加以下代码。

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

快乐编码:)

【讨论】：

【解决方案2】：

我通过使用html2canvas 插件解决了这个问题。基本上，html2canvas 将创建一个 div 元素（及其子元素）的新画布，然后您将其转换为带有myCanvas.toDataURL("image/png") 的 png 图像文件。此图像将包含您的 HTML 标签。（请注意 html2canvas 可能无法正确处理标签的 CSS 属性。）

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

【讨论】：

当前版本的 html2canvas 库支持基本的 CSS 转换。

【解决方案3】：

我应该早在 10 月份找到它时就将其发布 - 但它让我忘记了。我能够找到自己问题的答案。

首先在这里查看帖子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 />

【讨论】：