在 Node.js 中转换 SVG 图像格式每日前端夜话0xAD

每日前端夜话0xAD

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:1023 字

预计阅读时间:5 分钟

作者:Alex Ronin

翻译:疯狂的技术宅

来源:coderrocketfuel

介绍

你需要将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

Yarn

现在我们已经准备好开始编写一些代码并转换图像了!

SVG 转 PNG

对于第一个例子,我们将 SVG文 件转换为可移植网络图形(PNG)文件格式。确保你在项目目录的根目录中有一个可用的 SVG 文件。

这是完整的代码:

让我们分解代码的每个部分:

首先,导入sharp包并将其保存在sharp变量中。

然后,我们用sharp包来读取我们的 文件,将其转换为 PNG 并使用 函数将新的 PNG文件写入你的目录。

sharp方法是一个 promise,我们用它来获取文件的 。

最后,我们用 方法来捕获并 所有错误。

当你运行代码时,应该得到类似的输出:

你应该能够在项目目录中看到新的 PNG 文件。

还可以将其他选项传递给 方法来更改输出图像。这些包括压缩级别、质量、颜色等。你可以在文档中查看它们。

SVG 转 JPEG

现在,让我们将 SVG 文件转换为 JPEG 格式。确保项目目录的根目录中有一个 SVG 文件可供使用。

这是完整的代码:

当运行代码时,你应该得到类似的输出:

你应该在项目目录中看到新的JPEG文件。

文档:http://sharp.pixelplumbing.com/en/stable/api-output/#png。

SVG 转 TIFF

接下来,让我们将SVG文件转换为标记图像文件格式(TIFF)文件。确保你在项目目录的根目录中有一个我们可以使用的SVG文件。

这是完整的代码:

当你运行代码时,应该得到类似的输出:

你应该在项目目录中看到新的TIFF文件。

文档:http://sharp.pixelplumbing.com/en/stable/api-output/#tiff。

SVG到WEBP

接下来,将 SVG 文件转换为 WEBP 文件格式。确保你在项目目录的根目录中有一个我们可以使用的SVG文件。

这是完整的代码:

输出:

你应该在项目目录中看到新的WEBP文件。

文档:http://sharp.pixelplumbing.com/en/stable/api-output/#webp。

SVG到HEIF

最后一个例子,让我们将 SVG 文件转换为高效图像文件(HEIF)格式。确保你在项目目录的根目录中有一个可用的SVG文件。

这是完整的代码:

你还应该在项目目录中看到新的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

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 !

唠一唠怎样才能拿高薪

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190819A0KDEJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券