svg 转 png

主要思路:

将 svg 转为Blob，
然后使用URL.createObjectURL创建一个临时的 URL，
然后使用<img>标签加载这个 URL，
最后使用<canvas>标签将图片绘制到画布上，
最后使用canvas.toDataURL将画布上的内容转为 base64 格式的图片。

function svgToPng(svg: string, callback?: (imgData: string) => void) {
  const url = getSvgUrl(svg)
  svgUrlToPng(url, (imgData: string) => {
    callback && callback(imgData)
    URL.revokeObjectURL(url)
  })
}

function getSvgUrl(svg: BlobPart) {
  return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }))
}

function svgUrlToPng(svgUrl: string, callback: (imgData: string) => void) {
  const svgImage = document.createElement('img')
  document.body.appendChild(svgImage)
  svgImage.onload = function () {
    const canvas = document.createElement('canvas')
    canvas.width = svgImage.clientWidth
    canvas.height = svgImage.clientHeight
    const canvasCtx = canvas.getContext('2d')
    canvasCtx!.drawImage(svgImage, 0, 0)
    const imgData = canvas.toDataURL('image/png')
    callback(imgData)
  }
  svgImage.src = svgUrl
}

svg 转 png ​

svg 转 png