5

私は 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>

手動スクリーンショット手動スクリーンショット 空白の印刷イメージ白紙印刷イメージ

4

3 に答える 3

1

html2canvasプラグインを使用して、この問題を解決しました。基本的に、html2canvas は div 要素 (その子要素を含む) の新しいキャンバスを作成し、myCanvas.toDataURL("image/png"). この画像には HTML ラベルが含まれます。(html2canvas がラベルの CSS プロパティを適切に処理しない場合があることに注意してください。)

 html2canvas(document.getElementById("diagram-container"), {
         onrendered: function(canvas) {
         var img = canvas.toDataURL();
         document.write('<img src="'+img+'"/>');
          }
  });
于 2013-06-06T21:56:45.303 に答える
0

私はそれを見つけた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 />
于 2013-01-16T17:35:41.200 に答える