在Node.js中将SVG图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式的方法
介绍
你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？本文将指导你如何转换为所有这些类型的格式。
我们将使用 Node.js 和Sharp npm 包来完成大部分繁重的工作。
目录
- 安装 Sharp Npm 包
- SVG 转 PNG
- SVG 转 JPEG
- SVG 转 TIFF
- SVG 转 WEBP
- SVG 转 HEIF
安装Sharp Npm Package
首先你需要安装 npm 包。你可以使用下面的 npm 或 yarn 命令安装：
Npm
$ npm install sharp --save
Yarn
$ yarn add sharp
现在我们已经准备好开始编写一些代码并转换图像了！
SVG 转 PNG
对于第一个例子，我们将 SVG文 件转换为可移植网络图形（PNG）文件格式。确保你在项目目录的根目录中有一个可用的 SVG 文件。
这是完整的代码：
// Node.js
const sharp = require("sharp")
sharp("file.svg")
.png()
.toFile("new-file.png")
.then(function(info) {
console.log(info)
})
.catch(function(err) {
console.log(err)
})
让我们分解代码的每个部分：
- 首先，导入 sharp 包并将其保存在 sharp 变量中。
- 然后，我们用 sharp 包来读取我们的 file.svg 文件，将其转换为 PNG 并使用 .toFile() 函数将新的 PNG文件写入你的目录。
- sharp 方法是一个 promise，我们用它来获取文件的 info。
- 最后，我们用 .catch() 方法来捕获并 console.log() 所有错误。
当你运行代码时，应该得到类似的输出：
{
format: 'png',
width: 2500,
height: 527,
channels: 4,
premultiplied: false,
size: 47194
}
你应该能够在项目目录中看到新的 PNG 文件。
还可以将其他选项传递给 .png() 方法来更改输出图像。这些包括压缩级别、质量、颜色等。你可以在文档中查看它们。
SVG 转 JPEG
现在，让我们将 SVG 文件转换为 JPEG 格式。确保项目目录的根目录中有一个 SVG 文件可供使用。
这是完整的代码：
const sharp = require("sharp")
sharp("file.svg")
.png()
.toFile("new-file.jpg")
.then(function(info) {
console.log(info)
})
.catch(function(err) {
console.log(err)
})
当运行代码时，你应该得到类似的输出：
{
format: 'jpg',
width: 2500,
height: 527,
channels: 4,
premultiplied: false,
size: 47194
}
你应该在项目目录中看到新的JPEG文件。
文档：http://sharp.pixelplumbing.com/en/stable/api-output/#png
SVG 转 TIFF
接下来，让我们将SVG文件转换为标记图像文件格式（TIFF）文件。确保你在项目目录的根目录中有一个我们可以使用的SVG文件。
这是完整的代码：
const sharp = require("sharp")
sharp("file.svg")
.tiff()
.toFile("new-file.tiff")
.then(function(info) {
console.log(info)
})
.catch(function(err) {
console.log(err)
})
当你运行代码时，应该得到类似的输出：
{
format: 'tiff',
width: 2500,
height: 527,
channels: 3,
premultiplied: false,
size: 65778
}
你应该在项目目录中看到新的TIFF文件。
文档：http://sharp.pixelplumbing.com/en/stable/api-output/#tiff
SVG到WEBP
接下来，将 SVG 文件转换为 WEBP 文件格式。确保你在项目目录的根目录中有一个我们可以使用的SVG文件。
这是完整的代码：
const sharp = require("sharp")
sharp("file.svg")
.webp()
.toFile("new-file.webp")
.then(function(info) {
console.log(info)
})
.catch(function(err) {
console.log(err)
})
输出：
{
format: 'webp',
width: 2500,
height: 527,
channels: 4,
premultiplied: false,
size: 35600
}
你应该在项目目录中看到新的WEBP文件。
文档：http://sharp.pixelplumbing.com/en/stable/api-output/#webp
SVG到HEIF
最后一个例子，让我们将 SVG 文件转换为高效图像文件（HEIF）格式。确保你在项目目录的根目录中有一个可用的SVG文件。
这是完整的代码：
const sharp = require("sharp")
sharp("file.svg")
.png()
.toFile("new-file.heif")
.then(function(info) {
console.log(info)
})
.catch(function(err) {
console.log(err)
})
你还应该在项目目录中看到新的HEIF文件。
文档：http://sharp.pixelplumbing.com/en/stable/api-output/#png
结论
希望本文能帮助你完成编码工作！也希望大家多多支持脚本之家。
相关文章
在 Node.js 的世界中,多线程技术一直是一个受到广泛关注的领域,本文主要介绍了Node.js 多线程实战小结,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
下面小编就为大家带来一篇浅谈Node.js ORM框架Sequlize之表间关系。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最近在做微信的应用号小程序开发，小程序的后台数据接口需要https安全请求，所以需要我的nodejs服务器能够提供https的支持，现在就将整个https服务器的搭建过程说一下2018-01-01
这篇文章主要介绍了深入理解Node.js 事件循环和回调函数，详细的介绍Node.js 事件循环和Node.js回调函数，需要学习的可以参考一下。2016-11-11
这篇文章主要介绍了Node.js 回调函数实例详解的相关资料,需要的朋友可以参考下2017-07-07
Node.js 中使用fetch 按JSON格式发post请求的问题解析
最近在测试一个api，可以用curl命令直接访问，指定header相关配置，request body(JSON)，成功后返回一个JSON，这篇文章主要介绍了Node.js 中使用fetch 按JSON格式发post请求,需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了服务端nodejs抓取jsonp接口数据实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了nodejs实现获取当前url地址及url各种参数值,本文直接给出代码实例,需要的朋友可以参考下2015-06-06
本文给大家介绍的是node.js的初体验，从最简单的内容开始，慢慢的深入分析node.js。并附上一则很不错的文章《7天学会nodeJS》更加详细的向我们展示了node.js的学习步骤。2015-03-03
这篇文章主要介绍了node使用mysql获取数据库数据中文乱码问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最新评论