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


Posted in Javascript onAugust 22, 2019

介绍

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

$ npm install sharp --save

Yarn

$ yarn add sharp

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

SVG 转 PNG

对于第一个例子,我们将 SVG文 件转换为可移植网络图形(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)    
  })

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

  1. 首先,导入 sharp 包并将其保存在 sharp 变量中。
  2. 然后,我们用 sharp 包来读取我们的 file.svg 文件,将其转换为 PNG 并使用 .toFile() 函数将新的 PNG文件写入你的目录。
  3. sharp 方法是一个 promise,我们用它来获取文件的 info。
  4. 最后,我们用 .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.com/en/stable/api-output/#png

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.com/en/stable/api-output/#tiff

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.com/en/stable/api-output/#webp

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.com/en/stable/api-output/#png

结论

希望本文能帮助你完成编码工作!也希望大家多多支持三水点靠木。

原文:https://coderrocketfuel.com/article/convert-a-svg-image-to-png-jpeg-tiff-webp-and-heif-formats-in-node-js

Javascript 相关文章推荐
基于javascript 闭包基础分享
Jul 10 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 #Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 #Javascript
node实现爬虫的几种简易方式
Aug 22 #Javascript
vue router动态路由设置参数可选问题
Aug 21 #Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 #Javascript
js时间转换毫秒的实例代码
Aug 21 #Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP无限分类的类
2007/01/02 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
webpack4 升级迁移的实现
2018/09/12 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
python中类与对象之间的关系详解
2020/12/16 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
JNI的定义
2012/11/25 面试题
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
团工委书记自荐书范文
2013/12/17 职场文书
电气工程师岗位职责
2014/01/01 职场文书
教师旷工检讨书
2014/01/18 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
工程质量保证书
2015/05/09 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python