在 React js 中将 svg 下载为 png答案

【问题标题】：Download svg as png in react js在 React js 中将 svg 下载为 png
【发布时间】：2022-12-16 10:37:32
【问题描述】：

我尝试下载 svg 标签元素，实际上是 svg 使用下一个函数呈现的图像：

 // Get the SVG element
    const svg = document.getElementsByTagName('svg')[0];

    const canvas = document.createElement('canvas');
    canvas.width = svg.clientWidth;
    canvas.height = svg.clientHeight;

    const img = new Image();
    img.src = `data:image/svg+xml;utf8,${new XMLSerializer().serializeToString(
      svg,
    )}`;

    img.onload = function() {
      console.log(img)
      canvas.getContext('2d')?.drawImage(img, 0, 0);
    };

    const a = document.createElement('a');
    a.download = 'my-image.png';
    a.href = canvas.toDataURL();
    a.click();

当我单击下载按钮时，图像已下载，但它是黑色的，没有任何字符。
为什么会发生以及如何获得有效图像？
PS：我在网站上调查了很多答案，但他们没有帮助。如果有人会帮助我的例子，那将对我有很大帮助。

【问题讨论】：

标签： javascript

【解决方案1】：

你可以使用canvas.toDataURL('image/png');

参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

【讨论】：