在 Node.js 中转换 SVG 图像格式[每日前端夜话0xAD]

介绍

你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？本文将指导你如何转换为所有这些类型的格式。

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

SVG 转 PNG

对于第一个例子，我们将 SVG文件转换为可移植网络图形（PNG）文件格式。确保你在项目目录的根目录中有一个可用的 SVG 文件。

这是完整的代码：

1// Node.js 2 3const sharp = require("sharp") 4 5sharp("file.svg") 6    .png() 7    .toFile("new-file.png") 8    .then(function(info) { 9        console.log(info)10    })11    .catch(function(err) {12        console.log(err)        13    })

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

首先，导入 sharp 包并将其保存在 sharp 变量中。
然后，我们用 sharp 包来读取我们的 file.svg 文件，将其转换为 PNG 并使用 .toFile() 函数将新的 PNG文件写入你的目录。
sharp 方法是一个 promise，我们用它来获取文件的 info。
最后，我们用 .catch() 方法来捕获并 console.log() 所有错误。

当你运行代码时，应该得到类似的输出：

1{2    format: 'png',3    width: 2500,4    height: 527,5    channels: 4,6    premultiplied: false,7    size: 471948}

你应该能够在项目目录中看到新的 PNG 文件。

还可以将其他选项传递给 .png() 方法来更改输出图像。这些包括压缩级别、质量、颜色等。你可以在文档中查看它们。

SVG 转 JPEG

现在，让我们将 SVG 文件转换为 JPEG 格式。确保项目目录的根目录中有一个 SVG 文件可供使用。

这是完整的代码：

 1const sharp = require("sharp") 2sharp("file.svg") 3    .png() 4    .toFile("new-file.jpg") 5    .then(function(info) { 6        console.log(info) 7    }) 8    .catch(function(err) { 9        console.log(err)10    })

当运行代码时，你应该得到类似的输出：

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

这是完整的代码：

 1const sharp = require("sharp") 2 3sharp("file.svg") 4  .tiff() 5  .toFile("new-file.tiff") 6  .then(function(info) { 7    console.log(info) 8  }) 9  .catch(function(err) {10    console.log(err)11  })

当你运行代码时，应该得到类似的输出：

1{2    format: 'tiff',3    width: 2500,4    height: 527,5    channels: 3,6    premultiplied: false,7    size: 657788}

你应该在项目目录中看到新的TIFF文件。

文档：http://sharp.pixelplumbing.com/en/stable/api-output/#tiff。

SVG到WEBP

接下来，将 SVG 文件转换为 WEBP 文件格式。确保你在项目目录的根目录中有一个我们可以使用的SVG文件。

这是完整的代码：

1const sharp = require("sharp") 2 3sharp("file.svg") 4  .webp() 5  .toFile("new-file.webp") 6  .then(function(info) { 7    console.log(info) 8  }) 9  .catch(function(err) {10    console.log(err)11  })

输出：

1{2  format: 'webp',3  width: 2500,4  height: 527,5  channels: 4,6  premultiplied: false,7  size: 356008}

你应该在项目目录中看到新的WEBP文件。

文档：http://sharp.pixelplumbing.com/en/stable/api-output/#webp。

SVG到HEIF

最后一个例子，让我们将 SVG 文件转换为高效图像文件（HEIF）格式。确保你在项目目录的根目录中有一个可用的SVG文件。

这是完整的代码：

 1const sharp = require("sharp") 2 3sharp("file.svg") 4  .png() 5  .toFile("new-file.heif") 6  .then(function(info) { 7    console.log(info) 8  }) 9  .catch(function(err) {10    console.log(err)11  })

你还应该在项目目录中看到新的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

介绍

目录

SVG 转 PNG

SVG 转 JPEG

SVG 转 TIFF

SVG到WEBP

SVG到HEIF

结论

更多相关文章

随机推荐