在前端开发中，我们经常需要在页面上展示图片，而 png 格式是经常使用的一种图片格式。为此，我们可以使用 npm 包 png，这个包可以在 Node.js 中将 png 图片解码成像素数组，或是将像素数组编码为 png 格式的图片。本文将详细介绍如何使用 npm 包 png。
安装
在使用之前，我们需要先安装 png 包。我们可以使用 npm 命令进行安装：
npm install png
或者，在 package.json 中添加依赖：
{
"dependencies": {
"png": "^3.0.0"
}
}解码 png 图片
将 png 图片解码成像素数组，是使用 png 包的常见操作。我们可以通过以下代码示例，实现 png 图片解码：
-- -------------------- ---- -------
----- -- - --------------
----- --- - -------------------
--------------------------------
--------- ------
------------- ---------- -
-- -----------
-----------------------
---我们首先，使用 fs 模块的 createReadStream 方法，将图片读入到内存中。然后，使用 png 包的 PNG 方法，创建一个新的 PNG 对象，该对象将其作为可读流的处理器。
当解码完成后，PNG 对象会触发 parsed 事件，我们在事件中获取解码后的像素数组，该数组是一个一维数组，每个元素代表一个像素中的红、绿、蓝、透明度四个通道的值。
编码 png 图片
我们也可以使用 png 包，将像素数组编码为 png 格式的图片。以下示例，将一个 4x4 大小的像素数组编码为 png 格式的图片：
-- -------------------- ---- -------
----- -- - --------------
----- --- - -------------------
----- ---------- - -
---- -- -- ---- -- ---- -- ---- -- -- ---- ---- ---- ---- ---- ----
---- ---- -- ---- -- ---- ---- ---- ---- -- ---- ---- ---- -- ---- ----
---- -- -- ---- -- ---- -- ---- -- -- ---- ---- ---- ---- ---- ----
---- ---- -- ---- -- ---- ---- ---- ---- -- ---- ---- ---- -- ---- ---
--
----- --- - --- ----- ------ -- ------- - ---
--- ---- - - -- - - ------------------ - -- -- -
---------- - - - -- - -------------- -- -
---------- - - - - - -- - ------------ - --- -- -
---------- - - - - - -- - ------------ - --- -- -
---------- - - - - - -- - ------------ - --- -- -
-
----------------------------------
------------- ---------- -
---------------- -----------
--
------------ ------------- -
-------------------
--
--------------------------我们首先，定义一个一维数组 pixelArray，该数组代表了 4x4 的图片，每个元素是一个像素中的四个通道的值。然后，我们创建一个 PNG 对象，指定该图片的宽高。
接下来，我们遍历像素数组，将每个像素中的四个通道的值，存储在 PNG 对象的 data 属性中。
最后，我们使用 fs 模块的 createWriteStream 方法，将 PNG 对象编码为 png 格式的图片，并保存到文件中。
总结
使用 npm 包 png，可以方便地将 png 图片解码成像素数组，或是将像素数组编码为 png 格式的图片。在实际开发中，我们可以使用该包实现更多有趣的功能。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f41eaf2dbf7be33b25672ba