前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在 Node.js 中转换 SVG 图像格式[每日前端夜话0xAD]

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

作者头像
疯狂的技术宅
发布2019-08-23 14:24:56
5.5K0
发布2019-08-23 14:24:56
举报
文章被收录于专栏:京程一灯

介绍

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

代码语言:javascript
复制
$ npm install sharp --save

Yarn

代码语言:javascript
复制
$ yarn add sharp

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

SVG 转 PNG

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

这是完整的代码:

代码语言:javascript
复制
// 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() 所有错误。

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

代码语言:javascript
复制
{
    format: 'png',
    width: 2500,
    height: 527,
    channels: 4,
    premultiplied: false,
    size: 47194
}

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

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

SVG 转 JPEG

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

这是完整的代码:

代码语言:javascript
复制
const sharp = require("sharp")
sharp("file.svg")
    .png()
    .toFile("new-file.jpg")
    .then(function(info) {
        console.log(info)
    })
    .catch(function(err) {
        console.log(err)
    })

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

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

这是完整的代码:

代码语言:javascript
复制
const sharp = require("sharp")

sharp("file.svg")
  .tiff()
  .toFile("new-file.tiff")
  .then(function(info) {
    console.log(info)
  })
  .catch(function(err) {
    console.log(err)
  })

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

代码语言:javascript
复制
{
    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文件。

这是完整的代码:

代码语言:javascript
复制
const sharp = require("sharp")

sharp("file.svg")
  .webp()
  .toFile("new-file.webp")
  .then(function(info) {
    console.log(info)
  })
  .catch(function(err) {
    console.log(err)
  })

输出:

代码语言:javascript
复制
{
  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文件。

这是完整的代码:

代码语言:javascript
复制
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。

结论

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端先锋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目录
  • 安装Sharp Npm Package
  • SVG 转 PNG
  • SVG 转 JPEG
  • SVG 转 TIFF
  • SVG到WEBP
  • SVG到HEIF
  • 结论
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档