在前端开发中，我们常常需要对图片做处理，其中之一就是将图片转换成 png 格式。而 npm 包 fast-png 可以帮助我们快速地进行这个过程，并且提供了多种选项以满足不同的需求。
安装 fast-png
要使用 fast-png，我们需要先安装它。打开终端，并执行以下命令：
npm i fast-png
加载 png 文件
在我们使用 fast-png 之前，我们需要先将 png 文件读入内存中。可以使用 Node.js 自带的 fs 模块读取文件，代码如下：
const fs = require('fs'); const { PNG } = require('fast-png'); const pngBuffer = fs.readFileSync('path/to/your.png'); const png = PNG.sync.read(pngBuffer);
我们首先引入了 fs 和 fast-png，然后使用 fs.readFileSync 方法读入 png 文件并将其赋值给 pngBuffer，最后使用 fast-png 的 PNG.sync.read 方法以同步方式读取 png 文件并将其赋值给 png 变量。
修改 png 文件
fast-png 的核心是 PNG.sync.write 方法，我们可以使用这个方法来修改 png 文件。在这个方法中，我们可以通过修改 png 对象的不同属性以达到不同的效果，例如修改颜色、缩放、裁剪等。
下面是一些示例代码：
修改颜色
-- -------------------- ---- ------- -- -- --- --------- ----------- - ---- -- --- ----------- - -- -- ----- ----------- - -- -- ---- ----------- - ---- -- ----- -- -- --- -------- --- ---- - - -- - - ---------------- - -- -- - ----------- - ---- -- --- ---------- - -- - -- -- ----- ---------- - -- - -- -- ---- ---------- - -- - ---- -- ----- -展开代码
缩放和裁剪
-- -------------------- ---- ------- -- ---- ----- ---------- - ---- ----- --------- - ------------------- --------- - ----------- ---------- - ------------ -- ---- ----- ------ - ---- ----- ------ - --- ----- -------- - ---- ----- --------- - ---- ----- ---------- - ------------------ ------- ------- --------- -----------展开代码
其他操作
// 将图片转成灰度图 PNG.sync.grayscale(png); // 将图片旋转 180 度 PNG.sync.flip(png, true, true); // 将图片加上一个透明度为 0.5 的蒙层 PNG.sync.overlay(png, new Uint8Array([0, 0, 0, 128]));
保存 png 文件
当我们对 png 文件进行修改后，我们需要将修改后的 png 文件保存起来。我们可以使用以下代码将 png 对象写入到磁盘中：
fs.writeFileSync('path/to/your_modified.png', PNG.sync.write(png));
结语
fast-png 是一个非常有用的工具，在图片处理方面提供了很多便利。通过本文的介绍，你可以简单了解如何使用 fast-png 进行 png 图片处理。
爱好技术的开发者可以考虑研究 fast-png 的源码，从中学习一些技巧和思路。这对他们的技术水平提高会非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66256
