在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
介绍
你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗?本文将指导你如何转换为所有这些类型的格式。
我们将使用 Node.js 和Sharp npm 包来完成大部分繁重的工作。
目录
- 安装 Sharp Npm 包
- SVG 转 PNG
- SVG 转 JPEG
- SVG 转 TIFF
- SVG 转 WEBP
- 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) })
让我们分解代码的每个部分:
- 首先,导入 sharp 包并将其保存在 sharp 变量中。
- 然后,我们用 sharp 包来读取我们的 file.svg 文件,将其转换为 PNG 并使用 .toFile() 函数将新的 PNG文件写入你的目录。
- sharp 方法是一个 promise,我们用它来获取文件的 info。
- 最后,我们用 .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
结论
希望本文能帮助你完成编码工作!也希望大家多多支持脚本之家。
- Java动态代理一览笔录
- activiti-explorer部署笔记
- 没有准考证号我是如何暴力查询英语六级成绩的
- asp.net web api 2.2 基础框架(带例子)
- 走近科学:如何一步一步解码复杂的恶意软件
- OpenAI 开源机器人模拟 Python 库:优化API接口提升400%处理速度
- 远控木马上演白利用偷天神技:揭秘假破解工具背后的盗刷暗流
- 设计模式学习(三): 装饰者模式 (附C#实现)
- 浅谈非PE的攻击技巧
- hbase源码系列(十)HLog与日志恢复
- hbase源码系列(六)HMaster启动过程
- 如何写好一篇漏洞报告(国外篇)
- hbase源码系列(八)从Snapshot恢复表
- hbase源码系列(七)Snapshot的过程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- spring-boot-route(十八)spring-boot-actuator监控应用
- 浅析PHP7的多进程及实例源码
- spring-boot-route(十九)spring-boot-admin监控服务
- Python scrapy爬取小说代码案例详解
- 解决pip install psycopg2出错问题
- PHP开发的文字水印,缩略图,图片水印实现类与用法示例
- spring-boot-route(二十)Spring Task实现简单定时任务
- php+ajax实现商品对比功能示例
- spring-boot-route(二十一)Quartz实现动态定时任务
- Helm仓库的重要变更和v2支持将在11月结束
- ThinkPHP框架整合微信支付之刷卡模式图文详解
- 详解Python直接赋值,深拷贝和浅拷贝
- 利用python下载scihub成文献为PDF操作
- PHP中的Iterator迭代对象属性详解
- 使用Python实现微信拍一拍功能的思路代码