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

时间 2019-11-09

标签 node.js node 中将 svg 图像转换 png jpeg tiff webp heif 格式栏目 Node.js 繁體版

原文原文链接

翻译：疯狂的技术宅
原文：https://coderrocketfuel.com/a...
未经容许严禁转载javascript

介绍

你须要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？本文将指导你如何转换为全部这些类型的格式。前端

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

安装Sharp Npm Package

首先你须要安装 npm 包。你可使用下面的 npm 或 yarn 命令安装：node

Npmgit

$ npm install sharp --save

Yarn程序员

$ yarn add sharp

如今咱们已经准备好开始编写一些代码并转换图像了！github

SVG 转 PNG

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

这是完整的代码：面试

// 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)        
    })

让咱们分解代码的每一个部分：npm

首先，导入 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 文件可供使用。

这是完整的代码：

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

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

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

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

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

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

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

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

结论

但愿本文能帮助你完成编码工做！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...