Javascript 将ng2图表画布导出为png图像

我想创建一个链接，允许用户下载显示的图形。我目前尝试的方法是使用

。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");
  }

export\u graph=document.getElementById（“myChart”）；
下载链接：字符串；
exportGraph（）{
this.downloadLink=this.export_graph.toDataURL（“image/png”）；
}

当我尝试导出时，这是我在控制台中收到的错误消息：

---

无法读取null属性“toDataURL”

您应该使用锚定标记

首先，将下载链接添加到html

然后创建
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";
}

下载画布（事件）{
//从单击事件中获取``元素
var-anchor=event.target；
//获取画布，我通过标记名获取，您可以通过id进行操作
//并将锚点的href设置为画布数据URL
anchor.href=document.getElementsByTagName（'canvas'）[0].toDataURL（）；
//设置锚定“下载”属性（要下载的文件名）
anchor.download=“test.png”；
}

重要的是要在单击时执行
document.getElement…
，而不是在手之前。这样，您就可以确定html视图和
已经呈现并完成了绘制（您可以在页面上看到它）

在你的问题中，你正在寻找
元素，甚至在它出现在页面上之前，这就是它未定义的原因。
在
export\u graph=document.getElementById（“myChart”），则不会构造组件的dom。因此，它将返回null。尝试将其放入
ngAfterViewInit
中，不要忘记在AfterViewInit
中实现
。。正在研究plunker和答案。可能重复@MikeMcCaughan well-我正在使用typescript和angular2，我的问题更多的是使用ng图表（charts.js），建议的解决方案都不适用于我的代码结构。typescript编译为JavaScript，因此，在JavaScript中执行的任何操作都可以在TypeScript中使用。对于角度，只需使用。谢谢这是预期的工作现在。但是，当我进行导出时，有一个问题是，有没有办法控制导出图形的大小？在显示器上，它是一个小的合适尺寸，但在导出时，我想增加它的尺寸。您必须用您正在寻找的大尺寸重新创建
画布
，然后根据我的回答下载它。这样做时，可以隐藏画布。我这样说是因为如果你只是放大一个小的画布图像，它看起来会很生动。真的-谢谢，我会继续尝试。此外，我还进一步测试了这个解决方案，并意识到如果我在页面上有多个图形，并且无论我点击下载的是哪种图形，都只下载了一种图形类型-我是否需要传递一个id或一些关于哪种图形的区分符？您可以找到相对于按钮位置的画布。也许按钮和画布共享同一个父级，您可以通过这种方式找到特定的画布。或者，考虑为chartjs编写插件。