如何在pngjs与fs.createWriteStream创建图片后执行操作？on('finish')失效排查

我之前也踩过这个坑！问题大概率出在你监听finish事件的对象不对——得先把流的各个阶段理清楚：

先搞懂流的执行逻辑 #

官网示例是「读取文件流 → pipe到PNG解析流 → 处理像素数据 → 输出到写入流」。finish事件是**可写流（比如fs.createWriteStream创建的实例）**专属的完成信号，而pngjs的PNG是个转换流（Transform），它的完成相关事件是parsed或者end，直接在它身上监听finish肯定没反应。

正确代码示例 #

var fs = require('fs'), 
    PNG = require('pngjs').PNG;

// 先创建读写流实例
const readStream = fs.createReadStream('in.png');
const writeStream = fs.createWriteStream('out.png');

readStream
  .pipe(new PNG({ filterType: 4 }))
  .on('parsed', function() {
    // 这里执行你的像素操作，比如官网的反色逻辑
    for (var y = 0; y < this.height; y++) {
      for (var x = 0; x < this.width; x++) {
        var idx = (this.width * y + x) << 2;
        // 反转RGB颜色
        this.data[idx] = 255 - this.data[idx];     // R通道
        this.data[idx + 1] = 255 - this.data[idx + 1]; // G通道
        this.data[idx + 2] = 255 - this.data[idx + 2]; // B通道
        // 保留透明度通道，无需修改
      }
    }
    // 处理完像素后，把PNG数据流打包并输出到写入流
    this.pack().pipe(writeStream);
  });

// 重点：在写入流上监听finish事件！
writeStream.on('finish', function() {
  console.log('图片处理并写入完成啦！');
});

关键知识点梳理 #

• PNG实例的parsed事件：当图片像素数据全部解析完成、可以开始修改时触发，这时候操作this.data才有效。
• this.pack()：把修改后的像素重新打包成PNG格式的数据流，必须调用这个方法才能把数据输出到写入流。
• finish事件必须绑定到fs.createWriteStream返回的实例上，这个事件才是「所有数据写入文件完成」的信号。

链式调用的简化写法 #

如果你喜欢简洁的链式写法，也可以这样写：

fs.createReadStream('in.png')
  .pipe(new PNG({ filterType: 4 }))
  .on('parsed', function() {
    // 这里执行像素修改逻辑
    const idx = (this.width * y + x) << 2;
    this.data[idx] = 255 - this.data[idx];
    // ...其他操作
  })
  .pipe(fs.createWriteStream('out.png'))
  .on('finish', () => {
    console.log('图片处理完成！');
  });

这种写法里，最后直接把PNG流pipe到写入流，然后在这个写入流上监听finish，同样能正确捕获完成信号。

为什么你的原写法无效？ #

如果之前你是在PNG实例上监听finish，那肯定没反应——转换流（Transform）的finish事件只有当它作为可写流被主动结束时才会触发，但我们这里是把它当作可读流去输出数据，所以它的end事件可能会触发，但finish不会。真正的写入完成信号，只能从最终的可写流（WriteStream）上获取。

内容的提问来源于stack exchange，提问作者yozawiratama