在Node.js中將SVG圖像轉(zhuǎn)換為PNG,JPEG,TIFF,WEBP和HEIF格式的方法
介紹
你需要將SVG文件轉(zhuǎn)換為PNG、JPEG、TIFF、WEBP 和 HEIF 格式嗎?本文將指導(dǎo)你如何轉(zhuǎn)換為所有這些類型的格式。
我們將使用 Node.js 和Sharp npm 包來完成大部分繁重的工作。
目錄
- 安裝 Sharp Npm 包
- SVG 轉(zhuǎn) PNG
- SVG 轉(zhuǎn) JPEG
- SVG 轉(zhuǎn) TIFF
- SVG 轉(zhuǎn) WEBP
- SVG 轉(zhuǎn) HEIF
安裝Sharp Npm Package
首先你需要安裝 npm 包。你可以使用下面的 npm 或 yarn 命令安裝:
Npm
$ npm install sharp --save
Yarn
$ yarn add sharp
現(xiàn)在我們已經(jīng)準備好開始編寫一些代碼并轉(zhuǎn)換圖像了!
SVG 轉(zhuǎn) PNG
對于第一個例子,我們將 SVG文 件轉(zhuǎn)換為可移植網(wǎng)絡(luò)圖形(PNG)文件格式。確保你在項目目錄的根目錄中有一個可用的 SVG 文件。
這是完整的代碼:
// 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) })
讓我們分解代碼的每個部分:
- 首先,導(dǎo)入 sharp 包并將其保存在 sharp 變量中。
- 然后,我們用 sharp 包來讀取我們的 file.svg 文件,將其轉(zhuǎn)換為 PNG 并使用 .toFile() 函數(shù)將新的 PNG文件寫入你的目錄。
- sharp 方法是一個 promise,我們用它來獲取文件的 info。
- 最后,我們用 .catch() 方法來捕獲并 console.log() 所有錯誤。
當(dāng)你運行代碼時,應(yīng)該得到類似的輸出:
{ format: 'png', width: 2500, height: 527, channels: 4, premultiplied: false, size: 47194 }
你應(yīng)該能夠在項目目錄中看到新的 PNG 文件。
還可以將其他選項傳遞給 .png() 方法來更改輸出圖像。這些包括壓縮級別、質(zhì)量、顏色等。你可以在文檔中查看它們。
SVG 轉(zhuǎn) JPEG
現(xiàn)在,讓我們將 SVG 文件轉(zhuǎn)換為 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) })
當(dāng)運行代碼時,你應(yīng)該得到類似的輸出:
{ format: 'jpg', width: 2500, height: 527, channels: 4, premultiplied: false, size: 47194 }
你應(yīng)該在項目目錄中看到新的JPEG文件。
文檔:http://sharp.pixelplumbing.com/en/stable/api-output/#png
SVG 轉(zhuǎn) TIFF
接下來,讓我們將SVG文件轉(zhuǎn)換為標記圖像文件格式(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) })
當(dāng)你運行代碼時,應(yīng)該得到類似的輸出:
{ format: 'tiff', width: 2500, height: 527, channels: 3, premultiplied: false, size: 65778 }
你應(yīng)該在項目目錄中看到新的TIFF文件。
文檔:http://sharp.pixelplumbing.com/en/stable/api-output/#tiff
SVG到WEBP
接下來,將 SVG 文件轉(zhuǎn)換為 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 }
你應(yīng)該在項目目錄中看到新的WEBP文件。
文檔:http://sharp.pixelplumbing.com/en/stable/api-output/#webp
SVG到HEIF
最后一個例子,讓我們將 SVG 文件轉(zhuǎn)換為高效圖像文件(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) })
你還應(yīng)該在項目目錄中看到新的HEIF文件。
文檔:http://sharp.pixelplumbing.com/en/stable/api-output/#png
結(jié)論
希望本文能幫助你完成編碼工作!也希望大家多多支持腳本之家。
相關(guān)文章
Node中的util.promisify()方法的基本使用和實現(xiàn)
眾所周知,在JS中實現(xiàn)異步編程主要是通過以下幾種方案,回調(diào)函數(shù),觀察者模式,Generator,Promise,async / await ,今天就和大家一起聊一下在node中的一個util.promisify()這個API的基本使用和基本實現(xiàn)2023-07-07Node.js實現(xiàn)爬取網(wǎng)站圖片的示例代碼
本文將利用Node.js開發(fā)一個小示例—爬取某圖片網(wǎng)站的圖片,文中涉及的知識點有https模塊、cheerio模塊、fs模塊和閉包,感興趣的可以了解一下2022-04-04簡單聊一聊Node.js參數(shù)max-old-space-size
簡單的說Node.js就是運行在服務(wù)端的JavaScript,下面這篇文章主要給大家介紹了關(guān)于Node.js參數(shù)max-old-space-size的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01node上的redis調(diào)用優(yōu)化示例詳解
這篇文章主要給大家介紹了關(guān)于node上redis調(diào)用優(yōu)化的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10Node.js五大應(yīng)用性能技巧小結(jié)(必須收藏)
本篇文章主要介紹了Node.js五大應(yīng)用性能技巧小結(jié)(必須收藏),小編覺得挺不錯的,現(xiàn)在分享給大家2017-08-08