使用JavaScript将svg导出成图片格式

最新推荐文章于 2024-08-01 00:26:34 发布

csu_zipple

最新推荐文章于 2024-08-01 00:26:34 发布

阅读量7k

点赞数 7

分类专栏：前端杂事

本文链接：https://blog.csdn.net/csu_passer/article/details/89072007

版权

前端杂事专栏收录该内容

205 篇文章 6 订阅

订阅专栏

利用canvas将svg node信息导出成图片格式，具体代码如下：

/**
 * 将svg导出成图片
 * @param node svg节点 => document.querySelector('svg')
 * @param name 生成的图片名称
 * @param width 生成的图片宽度
 * @param height 生成的图片高度
 * @param type 生成的图片类型
 */
export const covertSVG2Image = (node, name, width, height, type = 'png') => {
  let serializer = new XMLSerializer()
  let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)
  let image = new Image()
  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
  let canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  let context = canvas.getContext('2d')
  context.fillStyle = '#fff'
  context.fillRect(0, 0, 10000, 10000)
  image.onload = function () {
    context.drawImage(image, 0, 0)
    let a = document.createElement('a')
    a.download = `${name}.${type}`
    a.href = canvas.toDataURL(`image/${type}`)
    a.click()
  }
}