JIT Spacetree 레이블을 이미지로 저장

Question

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> 

수동 스크린 샷 빈 인쇄 된 이미지

Answer 1

내가 그것을 발견했을 때 나는 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); 
    } 
} 

을 - 코드 SaveCanvas를 호출하여 ASP 버튼을 함수 :

<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 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+'"/>'); 
      } 
    }); 

Answer 3

이 스레드는 오래된 것입니다. 그러나, 누군가가 이것을 찾고 html2canvas를 사용하고 싶지 않을 경우를 대비해서. 여기 당신을위한 해결책입니다.

  Label: { 
      type: 'Native' 
     }, 

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

해피 코딩 :)