什么是 pngjs2
PNG 是一种图片格式，而 pngjs2 则是一个用于处理 PNG 图片的 npm 模块。它支持读取和写入 PNG 图片，以及对 PNG 图片进行处理。
安装 pngjs2
要使用 pngjs2，你需要先安装它。你可以使用 npm 安装它：
--- ------- ------ ------
读取 PNG 图片
要读取 PNG 图片，你需要使用 pngjs2 模块中的 PNG 类。下面是一个简单的示例代码，它读取了一个 PNG 图片并打印了它的尺寸：
----- -- - --------------
----- --- - ----------------------
--------------------------------
--------- ------
------------- ---------- -
----------------------- -------------
---在这个示例代码中，我们首先使用 Node.js 提供的 fs 模块读取了一个 PNG 图片文件。然后，我们创建了一个 PNG 实例 new PNG()，并将 PNG 图片数据传递给它。最后，我们监听了 parsed 事件，当 PNG 图片被解析完成时就会触发该事件，我们就可以在该事件的回调函数中获得 PNG 图片的宽度和高度。
写入 PNG 图片
要写入 PNG 图片，你需要使用 pngjs2 模块中的 PNG 类。下面是一个简单的示例代码，它创建了一个 100x100 的白色 PNG 图片并保存为 output.png 文件：
----- -- - -------------- ----- --- - ---------------------- ----- --- - --- ----- ------ ---- ------- --- --- -------------- ----- ------ ----------------------------------------------------
在这个示例代码中，我们首先创建了一个 100x100 的 PNG 实例 png。然后，我们调用了 fill 方法来将 PNG 实例填充为白色。最后，我们使用 pack 方法打包 PNG 图片数据，并将打包后的数据写入到 output.png 文件中。
PNG 图片处理
除了读取和写入 PNG 图片，pngjs2 还支持一些 PNG 图片处理操作，例如裁剪、缩放、旋转等。下面是一个简单的示例代码，它读取了一个 PNG 图片并将它裁剪为中心点为 (50, 50)，宽度和高度为 50 的正方形：
----- -- - -------------- ----- --- - ---------------------- ----- ----- - --------------------------------- ----- ------ - ----------------------------------- ----- --- - --- ------ ---------------------------- ---------- - ----- ------ - -------------------- - -- - --- ----- ------ - --------------------- - -- - --- ----- --- - --- ----- ------ --- ------- -- --- --------------- ------- ------- --- --- -- --- ------------------------ ---
在这个示例代码中，我们首先使用 Node.js 提供的 fs 模块读取了一个 PNG 图片文件。然后，我们创建了一个 PNG 实例 png，并将 PNG 图片数据传递给它。接着，我们监听了 parsed 事件，当 PNG 图片被解析完成时就会触发该事件，我们就可以在该事件的回调函数中进行图片处理。
在本示例代码中，我们使用 Math.floor 求出图片中心点的坐标。然后，我们创建了一个 50x50 的 PNG 实例 out，并使用 bitblt 方法将 PNG 实例 png 中以中心点为起点、宽度和高度均为 50 的正方形复制到 PNG 实例 out 中。最后，我们将 PNG 实例 out 写入到 output.png 文件中。
总结
到这里，我们已经学习了如何使用 pngjs2 这个 npm 包来处理 PNG 图片了，它可以帮助我们读取、写入 PNG 图片，并进行一些 PNG 图片处理操作。使用 pngjs2，我们可以很方便地实现 PNG 图片的读写和简单处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb525b5cbfe1ea06113e2