在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
介绍
你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP和HEIF格式吗?本文将指导你如何转换为所有这些类型的格式。
我们将使用Node.js和Sharpnpm包来完成大部分繁重的工作。
目录
- 安装SharpNpm包
- SVG转PNG
- SVG转JPEG
- SVG转TIFF
- SVG转WEBP
- SVG转HEIF
安装SharpNpmPackage
首先你需要安装npm包。你可以使用下面的npm或yarn命令安装:
Npm
$npminstallsharp--save
Yarn
$yarnaddsharp
现在我们已经准备好开始编写一些代码并转换图像了!
SVG转PNG
对于第一个例子,我们将SVG文件转换为可移植网络图形(PNG)文件格式。确保你在项目目录的根目录中有一个可用的SVG文件。
这是完整的代码:
//Node.js
constsharp=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文件可供使用。
这是完整的代码:
constsharp=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文件。
这是完整的代码:
constsharp=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文件。
这是完整的代码:
constsharp=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文件。
这是完整的代码:
constsharp=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
结论
希望本文能帮助你完成编码工作!也希望大家多多支持毛票票。
原文:https://coderrocketfuel.com/article/convert-a-svg-image-to-png-jpeg-tiff-webp-and-heif-formats-in-node-js