[英]JIT Spacetree Save Labels as Image
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")
. 我正在使用JavaScript InfoVis Toolkit( http://thejit.org/ ),并尝试使用
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. 虽然这适用于我的ForceDirected图形 - 在SpaceTree中,我们将标签放在单独的DIV中,因此当我打印图像时,我得到一个空白图形。
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: 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>
Manual Screenshot 手动截图
Blank Printed Image
空白的印刷图像
I sort of solved this issue by using html2canvas plugin. 我通过使用html2canvas插件解决了这个问题。 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")
. 基本上,html2canvas将创建一个div元素(带有子元素)的新画布,然后使用
myCanvas.toDataURL("image/png")
将其转换为png图像文件。 This image will include your HTML labels. 此图片将包含您的HTML标签。 (Beware that html2canvas may not handle properly the labels' CSS properties.)
(请注意,html2canvas可能无法正确处理标签的CSS属性。)
html2canvas(document.getElementById("diagram-container"), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
document.write('<img src="'+img+'"/>');
}
});
I should have posted this back in October when I found it -- but it slipped my mind. 我应该在10月份发现它时发现它 - 但它让我感到不安。 I was able to find an answer to my own question.
我能够找到自己问题的答案。
First check out the post here HTML 5 Canvas Save Image 首先看看这里的帖子HTML 5 Canvas Save Image
Here is how I implemented the solution (get CanvasSaver function code from link above): 以下是我实现解决方案的方法(从上面的链接获取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);
}
}
Finally -- code your ASP button to call the SaveCanvas function: 最后 - 编写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 />
I know this thread is old. 我知道这个帖子已经过时了。 But, in case anyone is looking for this and do not want to use html2canvas.
但是,如果有人正在寻找这个并且不想使用html2canvas。 here is a solution for you guys.
这是你们的解决方案。
Label: {
type: 'Native'
},
Add the above in your javascript code var st = new $jit.ST({ <here> })
在您的javascript代码中添加以上内容
var st = new $jit.ST({ <here> })
To save it as a image, add the following code. 要将其另存为图像,请添加以下代码。
HTML: HTML:
<a onclick="getImage(this, 'filename.png', 'tree-id')">download tree</a>
JS: JS:
function getImage(a, filename, id){
a.link = document.getElementById(id).toDataURL();
a.download = filename;
}
Happy Coding :) 快乐编码:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.