在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函数
Aug 01 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
js实现3D图片展示效果
Mar 09 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 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中this关键字用法分析
2016/12/07 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
js与jquery回车提交的方法
2015/02/03 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
使用TensorFlow实现SVM
2018/09/06 Python
实例讲解Python3中abs()函数
2019/02/19 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python字符串的一些操作方法总结
2019/06/10 Python
利用python实现AR教程
2019/11/20 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
个人先进材料范文
2014/12/30 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
AJAX学习笔记
2021/05/18 Javascript