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

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

介绍

你需要将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 

  1. $ npm install sharp --save 

Yarn 

  1. $ yarn add sharp 

现在我们已经准备好开始编写一些代码并转换图像了!

SVG 转 PNG

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

这是完整的代码: 

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

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

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

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

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

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

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

SVG 转 JPEG

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

这是完整的代码: 

  1. const sharp = require("sharp")  
  2. sharp("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.     }) 

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

  1.  
  2.    format: 'jpg',  
  3.    width: 2500,  
  4.    height: 527,  
  5.    channels: 4,  
  6.    premultiplied: false,  
  7.    size: 47194  

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

文档:http://sharp.pixelplumbing.co...

SVG 转 TIFF

接下来,让我们将SVG文件转换为标记图像文件格式(TIFF)文件。确保你在项目目录的根目录中有一个我们可以使用的SVG文件。

这是完整的代码: 

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

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

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

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

文档:http://sharp.pixelplumbing.co...

SVG到WEBP

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

这是完整的代码: 

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

输出: 

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

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

文档:http://sharp.pixelplumbing.co...

SVG到HEIF

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

这是完整的代码: 

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

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

文档: http://sharp.pixelplumbing.co...

结论

希望本文能帮助你完成编码工作! 

 

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2022-05-23 08:23:51

图片处理项目AVIF

2022-12-25 16:15:38

HTMLJava可视化文档

2023-11-22 08:21:25

Android开发场景

2022-11-01 16:20:56

Java图像文件图像文件类型

2022-10-12 08:00:00

语音识别Node.js音频质量

2020-11-11 10:09:06

Node.jsPromise前端

2015-11-24 09:53:22

AngularJSXMLJSON

2021-06-07 12:20:14

LinuxASCII命令

2014-03-07 13:43:32

Node.jsNode

2012-03-09 09:11:29

Node.js

2024-03-04 00:06:00

位图GIF矢量图

2017-04-10 13:28:32

Node.jsJavaScript

2013-11-01 09:34:56

Node.js技术

2015-03-10 10:59:18

Node.js开发指南基础介绍

2022-05-19 09:48:07

webp浏览器

2014-02-14 10:48:32

Visual StudNode.js

2020-04-06 20:30:37

JavaScriptBoolean开发

2021-12-01 00:05:03

Js应用Ebpf

2011-10-28 16:05:56

Node.js

2021-07-26 05:24:59

Node.js SO_RESUEPORLibuv
点赞
收藏

51CTO技术栈公众号