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

我通過使用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+'"/>');
          }
  });

Answer 2

我應該在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 />

Answer 3

我知道這個帖子已經過時了。 但是，如果有人正在尋找這個並且不想使用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;
}

快樂編碼:)