D3JS図をpng/pdf/jpegとしてダウンロード

Question

私はこの問題に対する答えを探しています。私はsvgの形でD3Jsグラフを持っています。svgは円、テキスト、線、画像の属性を持っています。 ）。私はD3Jsチャートを.pngファイルとしてダウンロードできますが、チャートからイメージを取得できません！.i html2canvasを調べましたが、svgフォーマットをサポートしていません。

HTML

<button id="save" class="btn btn-primary " 
    style="margin-left: 5%;width: 10%;height: 70%;margin-top: 0%;" ng-click=""> 
      Save as Image 
</button> 

<div style="text-align:center;"> 
    <org-chart dataobj="vm.company" ng-if="vm.company"></org-chart> 
    <canvas width="1000" height="800" style="display: none;"></canvas> 
    <!-- <div id="svgdataurl" style="display: none;"></div> --> 
</div> 

JSファイル

d3.select("#save").on("click", function() { 

    var html = d3.select("svg") 
     .attr("xmlns", "http://www.w3.org/2000/svg") 
     .node().parentNode.innerHTML; 

    var imgsrc = 'data:image/svg+xml;base64,' + btoa(html); 
    var img = '<img src="' + imgsrc + '">'; 

    var canvas = document.querySelector("canvas"), 
     context = canvas.getContext("2d"); 


    var image = new Image; 
    image.src = imgsrc; 

    image.onload = function() { 
     context.drawImage(image, 0, 0); 
     var canvasdata = canvas.toDataURL("image/svg"); 
     var a = document.createElement("a"); 
     a.download = "sample.png"; 
     a.href = canvasdata; 
     a.click(); 
    }; 
}); 

サンプルD3コードは

node.append("image") 
    .attr("class", "circleClass") 
    .attr("xlink:href", function (d) { 
     return d.photo; 
    }) 
    .attr("x", function (d) { 
     if (d.group === "Focus") { 
      return -40; 
     } else { 
      return -25; 
     } 
    }) 
    .attr("y", function (d) { 
     if (d.group === 'Focus') { 
      return -40; 
     } else { 
      return -25; 
     } 
    }) 
    .attr("height", function (d) { 
     if (d.group === "Focus") { 
      return 80; 
     } else { 
      return 50; 
     } 
    }) 
    .attr("width", function (d) { 
     if (d.group === "Focus") { 
      return 80; 
     } else { 
      return 50; 
     } 
    }); 

が、私は一種のここで天井を打ってきたイメージを構築するために、私は本当にいくつかの助けをいただければ幸いです、コードサンプルは素晴らしいでしょう ありがとう

Answer 1

この問題を数週間解決しようとしたら、解決策を考え出しました。
1.クロスドメインまたは外部ソースがある場合（この場合はAmazonS3からの画像があります）。

1.1。 svgを文字列に変換します。xmlSerializeを使用してsvgを文字列に変換します（svgはxmlデータです）
1.2。バックエンドにAPI呼び出しを行う終了
1.3。文字列を受け取り、Apache Batikライブラリ（backEndはJava SpringBootにあります）を使用して、文字列を.png/.pdfに変換します。

私はcanvgを使用しようとしましたが、それは素晴らしいですが、それはsvgをキャンバスに変換し、キャンバスを汚してしまいます。外部リソースがあるためです。（何か変更があれば、しかし、それを見つけることができませんでした）。

HTML2Canvasは、存在する外部リソースもキャプチャしません。

私はFrontEndでこれを完全に処理しようとしましたが、ページ上のキャンバス要素にsvgを印刷することができました。右クリックしてイメージとしてイメージを保存できましたが、 ClientSideのsvgから.pngへ。

は、私はまだ誰かが私にいくつかのより多くの提案&あなたは私が想像する最初のデータのURLに画像を変換する必要があると思います