在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中的关联数组分析
Apr 09 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
js实现下一页页码效果
Mar 07 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
vuejs如何配置less
2017/04/25 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
学校采购员岗位职责
2014/01/02 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers