Node.js中修改PNG像素并保存新图像的解决方案咨询

问题场景 #

需要在Node.js环境下加载PNG图片、修改像素值后保存为新文件，目前已通过image-pixels完成图片加载和部分像素修改，但缺少保存逻辑，且Node.js无法使用浏览器的Image类，需要替代方案。现有代码如下：

const pixels = require('image-pixels');
const {data, width, height} = await pixels('http://localhost:8081/image.png');

console.log(data);

// 修改像素颜色
data[0] = 255;
data[1] = 255;
data[2] = 255;

// Todo: 保存新图像

data输出为RGBA格式的Uint8Array：

Uint8Array(400000000) [
  255, 255, 255, 255, 210, 215, 211, 255, 210, 215, 211, 255,
  ... 399999900 more items
]

方案一：使用pngjs库 #

pngjs是专注于PNG处理的轻量库，能直接处理Uint8Array格式的像素数据：

1. 安装依赖：

npm install pngjs

2. 完整实现代码：

const pixels = require('image-pixels');
const { PNG } = require('pngjs');
const fs = require('fs');

async function processImage() {
  const {data, width, height} = await pixels('http://localhost:8081/image.png');

  // 修改目标像素（示例：修改第一个像素为白色）
  data[0] = 255; // 红色通道
  data[1] = 255; // 绿色通道
  data[2] = 255; // 蓝色通道
  // data[3] 为Alpha通道，默认255（完全不透明）无需修改

  // 初始化PNG实例并写入像素数据
  const png = new PNG({ width, height });
  png.data = data;

  // 保存到本地文件
  png.pack().pipe(fs.createWriteStream('output.png'));
}

processImage();

方案二：使用sharp库 #

sharp是高性能图像处理库，适合处理大尺寸图片，API更简洁高效：

1. 安装依赖：

npm install sharp

2. 完整实现代码：

const pixels = require('image-pixels');
const sharp = require('sharp');

async function processImage() {
  const {data, width, height} = await pixels('http://localhost:8081/image.png');

  // 修改像素
  data[0] = 255;
  data[1] = 255;
  data[2] = 255;

  // 将Uint8Array转为PNG并保存
  await sharp(data, {
    raw: {
      width,
      height,
      channels: 4 // 对应image-pixels返回的RGBA格式
    }
  }).toFile('output.png');
}

processImage();

关键说明 #

• image-pixels返回的data是RGBA顺序的Uint8Array，每个像素占4个连续数组元素，修改时注意索引对应关系。
• 处理超大图片时，sharp的内存占用和处理速度优于pngjs，更推荐使用。

内容的提问来源于stack exchange，提问作者Young L.