Node.js中无需Canvas类库能否获取图像像素数组？

我明白你在Node.js环境里想避开Canvas类库获取图像像素数组的痛点，之前尝试的库要么暗戳戳依赖Canvas，要么抛出“SOI not found”这种摸不着头脑的错误，确实挺闹心的。下面给你两个靠谱的纯JS方案，完全不依赖Canvas，还能完美解析常见图像格式：

处理JPEG图像：使用jpeg-js #

jpeg-js是专门针对JPEG格式的纯JavaScript解析库，没有任何Canvas相关依赖，对各种JPEG变种的兼容性也不错，能解决你遇到的SOI解析错误问题。

步骤1：安装库 #

npm install jpeg-js

步骤2：示例代码 #

const fs = require('fs');
const jpeg = require('jpeg-js');

// 读取本地JPEG文件到Buffer
const imageBuffer = fs.readFileSync('0.jpg');

// 解析JPEG，获取原始像素数据
const rawImage = jpeg.decode(imageBuffer);

// 提取关键信息
const width = rawImage.width;
const height = rawImage.height;
// 像素数组是Uint8Array，格式为RGBA（每个像素占4个字节）
const pixelData = rawImage.data;

// 示例：遍历所有像素
for (let i = 0; i < pixelData.length; i += 4) {
  const red = pixelData[i];
  const green = pixelData[i + 1];
  const blue = pixelData[i + 2];
  const alpha = pixelData[i + 3]; // JPEG本身不支持透明通道，这里固定为255
  // 这里可以添加你的像素处理逻辑
}

处理PNG图像：使用pngjs #

如果需要处理PNG格式，pngjs是同样纯JS实现的可靠选择，同样不依赖Canvas，支持透明通道解析。

步骤1：安装库 #

npm install pngjs

步骤2：示例代码 #

const fs = require('fs');
const PNG = require('pngjs').PNG;

// 通过流的方式解析PNG文件
fs.createReadStream('0.png')
  .pipe(new PNG())
  .on('parsed', function() {
    // 解析完成后，this指向PNG实例
    const width = this.width;
    const height = this.height;
    const pixelData = this.data; // Uint8Array，RGBA格式

    // 示例：按行列遍历像素
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        const pixelIndex = (width * y + x) * 4;
        const red = pixelData[pixelIndex];
        const green = pixelData[pixelIndex + 1];
        const blue = pixelData[pixelIndex + 2];
        const alpha = pixelData[pixelIndex + 3];
        // 处理你的像素逻辑
      }
    }
  });

为什么之前的库会出问题？ #

你遇到的“SOI not found”错误，本质是JPEG解析时找不到图像起始标记（Start of Image），要么是你的JPEG文件本身有损坏，要么是get-image-pixels这类库的JPEG解析逻辑不够健壮。而jpeg-js专注于JPEG格式的解析，处理各种边缘情况的能力更强；至于get-image-data，它内部其实还是依赖了Canvas环境，所以不符合你的需求。

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