const { promises } = require('fs')
const { join } = require('path')
const { performance } = require('perf_hooks')

const { render } = require('@resvg/resvg-js')

async function main() {
  const svg = await promises.readFile(join(__dirname, './text.svg'))
  const t = performance.now()
  const pngData = render(svg, {
    background: 'rgba(238, 235, 230, .9)',
    fitTo: {
      mode: 'width',
      value: 1200,
    },
    font: {
      fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'], // Load custom fonts.
      loadSystemFonts: false, // It will be faster to disable loading system fonts.
      defaultFontFamily: 'Source Han Serif CN Light',
    },
    logLevel: 'debug',
  })
  console.info('✨ Done in', performance.now() - t, 'ms')

  await promises.writeFile(join(__dirname, './text-out.png'), pngData)
}

main()

import { render, initWasm } from '@resvg/resvg-wasm'
;(async function () {
  // The wasm must be initialized first,
  await initWasm(fetch('/your/path/index_bg.wasm'))
  const opts = {
    fitTo: {
      mode: 'width', // If you need to change the size
      value: 800,
    },
  }

  const svg = '<svg> ... </svg>' // input svg, String or Uint8Array
  const png = render(svg, opts) // PNG data, Uint8Array
  const svgUrl = URL.createObjectURL(new Blob([png], { type: 'image/png' }))
  document.getElementById('output').src = svgUrl
})()