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

Question

我们需要将画布图表下载为具有更高分辨率的 png 图像。尝试以下代码片段通过设置宽度和高度来调整图像大小。但下面的解决方案是在下载中给出空图像。下面的代码失败了。

如何在下载的 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();
  }

标签： javascriptangulartypescript

Answer 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();
  }
}