How to convert SVG to PNG in React?-CodePudding

I tried with this library: https://www.npmjs.com/package/convert-svg-to-png

But it reaise an error:

import { convert } from 'convert-svg-to-png'

    useEffect(() => {
        let png = convert('/iStock-1188768310.svg')
        console.log(png)
    })

Error: Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/tar-fs/index.js
./node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js
./node_modules/puppeteer/lib/cjs/puppeteer/node/Puppeteer.js
./node_modules/puppeteer/lib/cjs/puppeteer/initialize-node.js

What do I wrong, or is it any more 'standard' way to do it? My goal is to use the image az an og:image. I heard SVG can not be used, this is why I try convert to PNG.

CodePudding user response：

according to the library's npm page, the function you need to import is convertFile and not convert:

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

The following code should work:

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

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

CodePudding user response：

The title says "A Node.js package for converting SVG to PNG using headless Chromium". You can only use it in nodejs not in client-side JavaScript. You may want to check this answer if you want to do it in the browser: Convert SVG to image (JPEG, PNG, etc.) in the browser.