在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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
discuz安全提问算法
2007/06/06 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue mounted组件的使用
2018/06/18 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
校运会口号
2014/06/18 职场文书
违章停车检讨书
2014/10/21 职场文书
家长意见书
2015/06/04 职场文书
2016教师国培研修感言
2015/12/08 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python