将NG2-Chart画布导出到PNG图像

Question

我想创建一个链接，以允许用户下载显示的图形。我目前试图使其工作的方式是使用.toDataUrl，这是一种安全的方式，或者还有另一种方法可以做到这一点。

html ：

<canvas id="myChart" baseChart [colors]="colorsOverride" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
    [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
<div class="footer">
  <button (click)="exportGraph()">Export Graph</button>
</div>

组件：

  export_graph = <HTMLCanvasElement>document.getElementById("myChart");
  downloadLink: string;
  exportGraph(){
    this.downloadLink = this.export_graph.toDataURL("image/png");
  }

当我尝试导出时，这是我在控制台中收到的错误消息： Cannot read property 'toDataURL' of null

Answer 1

您应该使用锚标记<a>代替<button>，可以样式的样式看起来像一个按钮。然后，您可以附加单击事件并以此方式进行：

plunker：http：//plnkr.co/edit/xyfwok58r3eqdyk7pads？p = preview

首先，将下载链接添加到您的HTML <a href="#" (click)="downloadCanvas($event)"> DOWNLOAD THIS</a>

然后创建downloadCanvas功能

downloadCanvas(event) {
    // get the `<a>` element from click event
    var anchor = event.target;
    // get the canvas, I'm getting it by tag name, you can do by id
    // and set the href of the anchor to the canvas dataUrl
    anchor.href = document.getElementsByTagName('canvas')[0].toDataURL();
    // set the anchors 'download' attibute (name of the file to be downloaded)
    anchor.download = "test.png";
}

在单击而不是之前进行document.getElement...很重要。这样，您可以肯定的是HTML视图和 <canvas>已渲染并完成了绘图(您在页面上看到它(。

您在问题中执行此操作的方式，您正在寻找<canvas>元素，甚至在页面上呈现之前，它是为什么不确定的。