如何在Javascript中将RGBA原始缓冲区转换为PNG文件？

Question

在Node.js中，我希望能够从原始的RGBA像素值数组中压缩和保存PNG图像文件。

  for (var x = 0; x < pixelSize; x++) 
    for (var y = 0; y < pixelSize; y++) {
      const offset = (y * pixelSize + x) * 4 // RGBA = 4 bytes
      buffer[offset    ] = x    // R
      buffer[offset + 1] = y    // G
      buffer[offset + 2] = 0    // B
      buffer[offset + 3] = 255  // Alpha
    }

如何将其转换为磁盘上的PNG图像文件？

- Bjorn Reppen

Answer 1

例如使用 jimp：

var Jimp = require('jimp')

const pixelSize = 256
var image = new Jimp(pixelSize, pixelSize, function (err, image) {
  let buffer = image.bitmap.data
  for (var x = 0; x < pixelSize; x++) {
    for (var y = 0; y < pixelSize; y++) {
      const offset = (y * pixelSize + x) * 4 // RGBA = 4 bytes
      buffer[offset    ] = x    // R
      buffer[offset + 1] = y    // G
      buffer[offset + 2] = 0    // B
      buffer[offset + 3] = 255  // Alpha
    }
  }
  image.write('image.png')
})

- Bjorn Reppen

---

那是一个非常快速的自我回答。 - Rajesh

这是一种奇怪的同步和异步代码混合。如果从缓冲区创建图像是完全同步的操作，那么为什么要使用回调函数呢？ - riv

@riv 提供的代码对我来说无效。看起来构造函数异步调用回调函数。按照这种方式编写图像对我来说会产生空图像。在回调函数内部调用image.write可以解决问题。 - nikeee

谢谢@riv。可能是jimp改变了行为。我已经测试了你的建议，对我也起作用。答案中的代码现在已经更新了修复程序。 - Bjorn Reppen