使用更高分辨率的javascript将画布图表下载为PNG图像答案

【问题标题】：Download canvas chart as PNG image with higher resolution javascript使用更高分辨率的javascript将画布图表下载为PNG图像
【发布时间】：2021-05-31 22:13:02
【问题描述】：

我们需要将画布图表下载为具有更高分辨率的 png 图像。尝试使用以下代码 sn-p 通过设置宽度和高度来调整图像大小。但下面的解决方案是在下载中给出空图像。下面的代码中出现了一些错误。

如何在下载的 png 图像中调整画布图表的大小。

resizeImage(img, w, h) {
    var result = new Image();
    var canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(img, 0, 0, w, h);
    result.src = canvas.toDataURL();
    return result;
  }
  downloadChart(event: any, chartName: string) {
    var img = new Image();
    img.src = (document.getElementsByClassName('chartclassname')[0] as HTMLCanvasElement).toDataURL();  // chartclassname for canvas chart classname
    var link = document.createElement('a');
    var img2 = this.resizeImage(img, 500, 500);
    const anchor = document.getElementById('dynamicDownloadLink') as HTMLAnchorElement;
    anchor.href = img2.src;
    anchor.download = `${this.getChartNameForDownload(chartName)}.png`;
    anchor.click();
  }

【问题讨论】：

我认为您需要等待img laod 事件才能调用resizeImage。
@Wendelin 能否提供一些示例代码

标签： javascript angular typescript

【解决方案1】：

因为您正在动态创建一个新的Image，所以您必须等到它被加载后才能与drawImage 一起使用。

这应该工作：

downloadChart(event: any, chartName: string) {
  var img = new Image();
  img.src = (document.getElementsByClassName('chartclassname')[0] as HTMLCanvasElement).toDataURL();  // chartclassname for canvas chart classname
  img.onload = () => {
    var link = document.createElement('a');
    var img2 = this.resizeImage(img, 500, 500);
    const anchor = document.getElementById('dynamicDownloadLink') as HTMLAnchorElement;
    anchor.href = img2.src;
    anchor.download = `${this.getChartNameForDownload(chartName)}.png`;
    anchor.click();
  }
}

【讨论】：