svg 元素转 png 图片

最新推荐文章于 2024-06-25 14:37:48 发布

JIHANLIN

最新推荐文章于 2024-06-25 14:37:48 发布

阅读量244

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/JIHANLIN/article/details/139051150

版权

((node /* SVG 元素 */, multiple = 1 /* 缩放倍率 */) => {
  const serializer = new XMLSerializer()
  const source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)
  const img = new Image()
  img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
  setTimeout(() => {
    const canvasEl = document.createElement('canvas')
    canvasEl.width = img.naturalWidth * multiple
    canvasEl.height = img.naturalHeight * multiple
    const ctx = canvasEl.getContext('2d')
    img.onload = function () {
      ctx.drawImage(img, 0, 0, this.naturalWidth * multiple, this.naturalHeight * multiple)
      const a = document.createElement('a')
      a.href = canvasEl.toDataURL('image/png', 1)
      a.download = Date.now()
      a.click()
    }
  }, 0)
})($0 /* 选中 svg 元素，控制台注入代码 */)