如何在 React.js 中将 SVG 转换为 PNG 或 JPG/JPEG 文件

Question

How can I convert SVG files to png,jpg or jpeg Files in React.js Because I am trying to send my files to server and server only accepts jpg/jpeg or png. Any help? I only need files in one of these types. I don't need them in url or blob.

The screenshot of file in console

I searched all over the place. There are some but either the solution is for backend or javascript with dom

 const [fileImages, setFileImages] = useState<File[]>([]);
  const { state } = useAssetReportContext();

  const charts = state.chartsList.map(({ url, fileName }) => ({
    url,
    fileName,
  }));
  useEffect(() => {
    const fetchImages = () => {
      charts.map(({ url, fileName }) => {
        fetch(url)
          .then((response) => response.blob())
          .then(
            (blob) =>
              new File([blob], `${fileName}`, {
                type: blob.type,
              })
          )
          .then((file) => {
            setFileImages((prev) => [...prev, file]);
          });
      });
    };
    fetchImages();
  }, [state.chartsList.length]);

Answer 1

You can use 'convert-svg-to-png' library. This is the npm link

Then import it:

const { convertFile }  = require('convert-svg-to-png');

Then use the following code:

(async() => {
  const inputFilePath = '/path/to/my-image.svg';
  const outputFilePath = await convertFile(inputFilePath);

  console.log(outputFilePath);
  //=> "/path/to/my-image.png"
})();

Hope it works for you:)