3

我正在使用 ngx-graph 来显示一些图形。由于没有直接下载图形的功能，我环顾四周，发现人们使用 ngx-charts 和 html2canvas 来生成可下载的图表画布。

现在我正在尝试使用 html2canvas 生成我的图形的可下载画布，但是 html2canvas 生成的画布使我的图形的一些内容变黑。

1) 缺少部分节点块文本

2) 链接节点的线丢失，而箭头提示可见。

div 的样子

html2canvas 中的画布看起来如何

我的 ngx-graph 实现中的代码：

<div id="graph" #graph>
  <ngx-graph class="chart-container" [links]="links" [nodes]="nodes" [legend]="false" [draggingEnabled]="false">

    <ng-template #defsTemplate>
      <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto" fill="white">
        <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
      </svg:marker>
    </ng-template>

    <ng-template #nodeTemplate let-node>
      <svg:g class="node">
        <svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height" fill="white"/>
        <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
        </svg:text>
      </svg:g>
    </ng-template>

    <ng-template #linkTemplate let-link>
      <svg:g class="edge">
        <svg:path class="line" stroke-width="3" marker-end="url(#arrow)">
        </svg:path>
      </svg:g>
    </ng-template>

  </ngx-graph>
</div>

<button mat-button (click)="downloadAsPicture()" [disabled]="false">
  <mat-icon>cloud_download</mat-icon><span>Download as .png</span>
</button>

我的 html2canvas 实现中的代码：

downloadAsPicture() {
    html2canvas(document.getElementById("graph"), {height: 500})
    .then(function(canvas){
      var imgURL = canvas.toDataURL("image/png");
      var dlLink = document.createElement('a');
      dlLink.download = "image";
      dlLink.href = imgURL;
      dlLink.dataset.downloadurl = ["image/png", dlLink.download,   dlLink.href].join(':');

      document.body.appendChild(dlLink);
      dlLink.click();
      document.body.removeChild(dlLink);
      canvas.remove;
    });

我感谢任何帮助，还包括 ngx-graph 的替代品，我想要实现的目标可能更直接。

非常感谢。

4

0 回答 0