JavaScript将svg导出成图片格式（下载到本地）

最新推荐文章于 2025-11-23 19:50:16 发布

转载最新推荐文章于 2025-11-23 19:50:16 发布 · 4.9k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/csu_passer/article/details/89072007

文章标签：

#js

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种将SVG格式的图像转换为指定类型的图片的方法，通过封装为一个函数，可以轻松地设定输出图片的名称、宽度、高度及类型，如png、jpg等。此函数首先将SVG节点转换为XML字符串，然后创建一个Image对象并设置其源数据，接着创建Canvas对象进行绘制，最后下载生成的图片。

一、将该方法封装为一个函数


/**

 * 将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()

  }

}