欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法

程序员文章站 2022-04-09 12:40:41
介绍 你需要将svg文件转换为png、jpeg、tiff、webp 和 heif 格式吗?本文将指导你如何转换为所有这些类型的格式。 我们将使用 node.js 和...

介绍

你需要将svg文件转换为png、jpeg、tiff、webp 和 heif 格式吗?本文将指导你如何转换为所有这些类型的格式。

我们将使用 node.js 和sharp npm 包来完成大部分繁重的工作。

目录

  1. 安装 sharp npm 包
  2. svg 转 png
  3. svg 转 jpeg
  4. svg 转 tiff
  5. svg 转 webp
  6. 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)    
  })

让我们分解代码的每个部分:

  1. 首先,导入 sharp 包并将其保存在 sharp 变量中。
  2. 然后,我们用 sharp 包来读取我们的 file.svg 文件,将其转换为 png 并使用 .tofile() 函数将新的 png文件写入你的目录。
  3. sharp 方法是一个 promise,我们用它来获取文件的 info。
  4. 最后,我们用 .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文件。

文档:

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文件。

文档:

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文件。

文档:

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文件。

文档:

结论

希望本文能帮助你完成编码工作!也希望大家多多支持。

原文: