Javascript JIT Spacetree将标签另存为图像

Javascript JIT Spacetree将标签另存为图像,javascript,canvas,infovis,thejit,space-tree,Javascript,Canvas,Infovis,Thejit,Space Tree,我正在使用JavaScriptInfovisToolkit(),并尝试使用canvas.toDataURL(“image/png”)打印扩展的空间树可视化。虽然这适用于我的ForceDirected图——在SpaceTree中,我们的标签在一个单独的DIV中,所以当我打印图像时,我得到一个空白图 有人知道如何打印标签吗?任何帮助都将不胜感激。我附上了一个手动截图的图形和图像,我们得到打印 是的,我确实看到了这个问题——但它没有回答我的问题,因为我们不能使用“原生”标签,因为我们会进行一些即时的样

我正在使用JavaScriptInfovisToolkit(),并尝试使用
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>


我应该在十月份找到它的时候把它寄回去,但是我忘了。我能够找到我自己问题的答案

首先看看这里的帖子

下面是我如何实现该解决方案(从上面的链接获取CanvasSaver函数代码):

最后--编写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 />

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

html2canvas(document.getElementById(“图容器”){
onrendered:函数(画布){
var img=canvas.toDataURL();
文件。写(“”);
}
});

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

         Label: {
            type: 'Native'
        },
在javascript代码中添加上述内容
var st=new$jit.st({})

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

HTML:


快乐编码:)

嗨,我也在试着做同样的事情。你找到解决方案了吗?很抱歉,我花了一点时间发布了我为解决问题所做的事情——我必须回去找到我的代码。请参阅下面我的解决方案。这不是一个完美的解决方案,但它比另一个更好。当前版本的html2canvas库支持基本的CSS转换。
 html2canvas(document.getElementById("diagram-container"), {
         onrendered: function(canvas) {
         var img = canvas.toDataURL();
         document.write('<img src="'+img+'"/>');
          }
  });
         Label: {
            type: 'Native'
        },
<a onclick="getImage(this, 'filename.png', 'tree-id')">download tree</a>
function getImage(a, filename, id){
 a.link = document.getElementById(id).toDataURL();
 a.download = filename;
}