png.js 是一个纯 JavaScript 编写的 PNG 图像解码器，它能够将 PNG 格式的图像文件解码成像素数据，便于在前端应用中的处理和展示。在这篇文章中，我们将详细介绍如何使用 npm 包 png.js 来进行 PNG 图像解码及展示的操作，有助于前端工程师进行 PNG 图像的处理和实现。
安装及引入
首先，我们需要安装 png.js 这个 npm 包。在终端命令行输入下面的命令进行安装：
npm install pngjs
安装完成后，我们就可以在前端应用代码中引入 png.js 的模块，开始使用它提供的接口了。如下所示：
const PNG = require('pngjs').PNG;解码 PNG 图像
接下来，我们将 PNG 图像文件解码成像素数据。我们可以使用 PNG 类的构造函数来完成解码过程，如下所示：
fs.createReadStream('image.png')
.pipe(new PNG())
.on('parsed', function() {
// 处理解码后的像素数据
});以上代码中，我们调用 fs.createReadStream() 从文件系统中读取 PNG 图像文件，然后使用 PNG 类的构造函数 new PNG() 对读取到的图像进行解码。最后，在 parsed 事件回调函数中，我们可以处理解码后的像素数据了。
获取图像信息
解码后的 PNG 图像会被转换成一个 RGBA 像素矩阵，它包括了图像的宽度、高度、颜色模式等信息。我们可以通过访问 PNG 类实例的 width、height 和 color 属性来获取这些信息，如下所示：
fs.createReadStream('image.png')
.pipe(new PNG())
.on('parsed', function() {
const width = this.width;
const height = this.height;
const color = this.color;
// ...
});处理像素数据
通过 PNG 类的 parsed 事件回调函数，我们可以获取解码后的像素数据。在进行实际处理前，我们需要先理解像素数据的组织结构和格式。
像素数据是一个二维的数组，每个元素表示一个像素点的 RGBA 值。其中，R、G、B、A 均为 0 到 255 的整数值，分别表示红、绿、蓝、透明度的值。例如，我们可以使用下面的代码将 PNG 图像转换成灰度图像：
-- -------------------- ---- -------
--------------------------------
--------- ------
------------- ---------- -
--- ---- - - -- - - ------------ ---- -
--- ---- - - -- - - ----------- ---- -
----- --- - ----------- - - - -- -- --
----- ---- - --------------- - ------------- - -- - ------------- - --- - --
-------------- - -----
------------- - -- - -----
------------- - -- - -----
-
-
---以上代码中，我们遍历像素数据的每个元素，使用 RGB 值的平均值来计算灰度值，然后定义灰度值作为新的 R、G、B 值。这样操作后，我们就将彩色 PNG 图像转换成了灰度 PNG 图像。
显示 PNG 图像
最后，我们需要将 PNG 图像在前端应用中进行显示。对于浏览器应用，我们可以将像素数据封装成 Canvas 元素，然后直接在页面中展示。如下所示：
-- -------------------- ---- -------
--------------------------------
--------- ------
------------- ---------- -
----- ------ - ---------------------------------
------------ - -----------
------------- - ------------
----- ------- - ------------------------
----- ------- - ----------------------------------- -------------
----------------------------
----------------------------- -- ---
----------------------------------
---以上代码中，我们创建了一个 Canvas 元素，并根据图像宽度和高度分别设置了其宽高。然后，我们使用 context.createImageData() 函数创建了一个空白的 ImageData 对象，并将解码后的像素数据存储到了其中。最后，我们使用 context.putImageData() 将 ImageData 对象绘制到 Canvas 上，完成了 PNG 图像的展示操作。
到这里，我们就完成了 npm 包 png.js 的使用教程，希望读者能够通过本文的介绍，掌握 PNG 图像的解码和处理方法，进一步提升前端开发的技能和实践经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc60b5cbfe1ea06119fd