在 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...。