npm 包 @types/pngjs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，处理 PNG 图片格式是很常见的操作。而 @types/pngjs 是一个非常好用的 NPM 包，它提供了较为完善的 PNG 图片解析和处理的功能，并且还支持 TypeScript。

在本文中，我们将会详细讲解如何使用 @types/pngjs 包进行 PNG 图片处理。

安装

首先，我们需要在项目中安装 @types/pngjs 包：

npm install @types/pngjs

注意，这里我们安装的是 @types/pngjs 而非 pngjs，因为 @types/pngjs 是 pngjs 的 TypeScript 类型声明，是作为 pngjs 的 TypeScript 库的补充而存在的。

解析 PNG 文件

我们可以使用 @types/pngjs 包的 PNG 类来解析 PNG 文件。

import fs from 'fs';
import PNG from '@types/pngjs';

// 读取 PNG 文件
const pngBuffer = fs.readFileSync('image.png');

// 解析 PNG 文件
const png = PNG.sync.read(pngBuffer);

这里，我们使用 fs 模块读取 PNG 文件的二进制数据，并将其传给 PNG 类的 sync.read 方法进行解析。最终，解析结果会存储在 png 变量中。

处理 PNG 图片

一旦我们将 PNG 文件解析成了内存中的图像数据，我们就可以对其进行各种操作了。

获取宽高

我们可以通过 png.width 和 png.height 属性获取 PNG 图片的宽度和高度。

console.log(`宽度：${png.width}，高度：${png.height}`);

获取像素值

我们可以使用 png.getPixel(x, y) 和 png.getPixels() 方法获取 PNG 图片的像素值。其中，getPixel(x, y) 方法可以获取指定位置的像素值，而 getPixels() 方法会返回整个图片的像素值矩阵。

console.log(`坐标 (14, 23) 的像素值：${png.getPixel(14, 23)}`);
console.log(`整个图片的像素值：${png.getPixels()}`);

设置像素值

我们可以使用 png.setPixel(x, y, [r, g, b, a]) 和 png.setPixels(buffer) 方法设置 PNG 图片的像素值。其中，setPixel(x, y, [r, g, b, a]) 方法可以设置指定位置的像素值，而 setPixels(buffer) 方法会根据指定的像素值矩阵对整个图片进行重绘。

// 设置坐标 (14, 23) 的像素值为 (255, 255, 0, 255)
png.setPixel(14, 23, [255, 255, 0, 255]);
// 将整个图片的像素值设置为 buffer（buffer 长度必须为 png.width * png.height * 4）
png.setPixels(buffer);

写入 PNG 文件

最后，我们可以将处理后的 PNG 图片保存为文件。我们可以使用 fs 模块的 writeFileSync 方法将图片的字节数组保存到文件中，这里我们使用了 PNG.sync.write 方法将图片的字节数组转换成 PNG 格式。

// 将 png 图片写入文件 image-out.png
fs.writeFileSync('image-out.png', PNG.sync.write(png));

示例代码

下面是一个完整的示例代码，演示如何解析、修改和保存 PNG 图片。这里我们将图片转换成了灰度图。

-- -------------------- ---- -------
------ -- ---- -----
------ --- ---- ---------------

-- -- --- --
----- --------- - -----------------------------

-- -- --- --
----- --- - -------------------------

-- -------
--- ---- - - -- - - ----------- ---- -
  --- ---- - - -- - - ---------- ---- -
    ----- --- - ---------- - - - -- -- --
    ----- - - --------------
    ----- - - ------------ - ---
    ----- - - ------------ - ---
    ----- - - ------------ - ---
    ----- ---- - -------------- - - - ---- - - - ---- - --- -- ------
    ------------- - -----
    ------------ - -- - -----
    ------------ - -- - -----
    ------------ - -- - --
  -
-

-- - --- ------ -------------
--------------------------------- ---------------------

总结

通过本文，我们学习了如何使用 @types/pngjs 包对 PNG 图片进行解析和处理，并且演示了一个完整的例子。希望这篇文章能对各位前端开发者有所帮助，让 PNG 图片处理变得更加容易。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/types-pngjs