在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显示隐藏层比较不错的方法分析
Sep 30 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
react build 后打包发布总结
Aug 24 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
js实现随机数小游戏
Jun 28 Javascript
layer 关闭指定弹出层的例子
Sep 25 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
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php并发加锁示例
2016/10/17 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
JS中的回调函数实例浅析
2018/03/21 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python的数学算法函数及公式用法
2020/11/18 Python
python中altair可视化库实例用法
2021/01/26 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
2015年教师节活动总结
2015/03/20 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
JUnit5常用注解的使用
2021/07/02 Java/Android