在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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 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
php常用的url处理函数总结
2014/11/19 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PDO::errorCode讲解
2019/01/28 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
深入理解Django的自定义过滤器
2017/10/17 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
python同步windows和linux文件
2019/08/29 Python
wxPython色环电阻计算器
2019/11/18 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
高中生毕业学习总结的自我评价
2013/11/14 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
一年级班主任寄语
2014/01/19 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
初一学生评语大全
2014/04/24 职场文书
企业宣传策划方案
2014/05/29 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
python中取整数的几种方法
2021/11/07 Python
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android