前言
在前端开发中，有时需要将 svg 图形转换成 png 格式，以便在浏览器中展示或进行下载。此时，我们可以使用 npm 包 svg-to-png，帮助我们简单快捷地完成转换。
本文将详细介绍 svg-to-png 的使用方法，包括安装、调用和参数设置等内容，希望能对大家有所帮助。
安装
使用 npm 包管理工具，可以轻松安装 svg-to-png。
npm install svg-to-png --save
安装完成后，我们可以在项目中使用 require 或 import 引入该模块。
const svgToPng = require('svg-to-png');
// 或
import svgToPng from 'svg-to-png';调用
调用 svgToPng 方法将 svg 图形转换成 png 格式，需要传入两个参数：svgFilePath 和 pngFilePath。
svgToPng(svgFilePath, pngFilePath)
.then(() => {
console.log('Png saved successfully!');
})
.catch(error => {
console.log('Error:', error);
});其中，svgFilePath 是 svg 图片的路径，可以是本地文件系统路径，也可以是通过 http 或 https 获取的远程文件路径；pngFilePath 是转换后 png 图片的保存路径。
当调用成功时，控制台将打印 'Png saved successfully!'，表示 png 图片保存成功。
参数设置
svgToPng 方法支持设置多个参数，包括：
width 和 height
可以分别设置生成 png 图片的宽度和高度，以像素为单位，默认为 200。
svgToPng(svgFilePath, pngFilePath, { width: 400, height: 300 })
.then(() => {
console.log('Png saved successfully!');
})
.catch(error => {
console.log('Error:', error);
});compressionLevel
可以设置生成 png 图片的压缩质量，支持 0 到 9 的整数值，默认为 6。
svgToPng(svgFilePath, pngFilePath, { compressionLevel: 9 })
.then(() => {
console.log('Png saved successfully!');
})
.catch(error => {
console.log('Error:', error);
});format
可以设置生成 png 图片的颜色格式，支持 rgba 和 rgb 两种格式，默认为 rgba。
svgToPng(svgFilePath, pngFilePath, { format: 'rgb' })
.then(() => {
console.log('Png saved successfully!');
})
.catch(error => {
console.log('Error:', error);
});示例代码
下面是一个完整的例子，将本地 svg 图形转换成 png 格式，并保存到指定路径。
-- -------------------- ---- -------
----- -------- - ----------------------
----- ----------- - -------------
----- ----------- - -------------
--------------------- ------------ - ------ ---- ------- ---- ----------------- -- ------- ----- --
-------- -- -
---------------- ----- ----------------
--
------------ -- -
--------------------- -------
---小结
本文介绍了 npm 包 svg-to-png 的使用方法，详细讲解了安装、调用和参数设置等内容，并附有示例代码。希望本文能对大家在前端开发中使用 svg-to-png 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61917