在 React js 中将 svg 下载为 png

Question

I tried to download the svg tag element, actually the image that the svg renders using the next function:

 // 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();

When i click on the dowsnload buttoon, the image is downloaded but it is black without any character.
Why it is hapening and how to get a valid image?
PS: i investigated a lot of answer on the site but they don;t help. If someone will help with my example it will help me a lot.

Answer 1

The error occurs because you bring in an asynchronous context and don't wait for that and directly downloading the image.

You can avoid it by moving the "download part" (see example 1) into the onload function or by packing away the onload and hoping that it will load fast enough (example 2).

Example 1:

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

Example 2:

//...
canvas.getContext('2d')?.drawImage(img, 0, 0);
const a = document.createElement('a');
a.download = 'my-image.png';
a.href = canvas.toDataURL();
a.click();