Node.js中手动创建PNG IDAT块：16位灰度图像的过滤字节处理指南

// 定义字节序常量
const LITTLE_ENDIAN = Symbol(`little endian`);
const BIG_ENDIAN = Symbol(`big endian`);

// 检查当前系统字节序
const endian = (function checkEndian() {
  const buf = new ArrayBuffer(2);
  const u8 = new Uint8Array(buf);
  const u16 = new Uint16Array(buf);
  u8.set([0xaa, 0xbb], 0); // 写入字节 0xaa, 0xbb
  // 如果u16[0]是0xbbaa，说明是小端（低位在前）
  return u16[0] === 0xbbaa ? LITTLE_ENDIAN : BIG_ENDIAN;
})();

// 假设我们有一个Uint16Array的像素数据
const [w, h] = [10, 10];
const pngPixels = new Uint16Array(w * h);
for (let x = 0; x < w; x++) {
  for (let y = 0; y < h; y++) {
    const i = x + y * w;
    // 示例像素值，确保在0到2^16-1范围内
    pngPixels[i] = ((i / (w * h - 1)) * (2 ** 16 - 1)) | 0;
  }
}

// 将16位像素数据转换为8位字节数组
const pngPixels8 = new Uint8Array(pngPixels.buffer);

// 如果是小端系统，需要进行字节交换
if (endian === LITTLE_ENDIAN) {
  for (let i = 0, e = pngPixels8.length; i < e; i += 2) {
    let temp = pngPixels8[i];
    pngPixels8[i] = pngPixels8[i + 1];
    pngPixels8[i + 1] = temp;
  }
}

// 创建一个新的Uint8Array来存储带过滤字节的扫描行数据
// 每个扫描行增加1个字节（过滤字节）
const filtered = new Uint8Array(pngPixels8.length + h);

for (let y = 0; y < h; y++) {
  // 计算当前扫描行在原始8位像素数据中的起始索引
  const sourceStartIndex = 2 * y * w;
  // 计算当前扫描行在带过滤字节数据中的起始索引
  // 每个之前的行都贡献了一个过滤字节
  const destStartIndex = y + sourceStartIndex;

  // 默认过滤字节为0x00 (无过滤)，无需显式设置，Uint8Array初始化时默认为0
  // filtered[destStartIndex] = 0; // 这一行可以省略，因为Uint8Array默认填充0

  // 将当前扫描行的像素数据复制到新数组中
  // 注意：目标起始位置是 destStartIndex + 1，因为 destStartIndex 处是过滤字节
  filtered.set(pngPixels8.subarray(sourceStartIndex, sourceStartIndex + 2 * w), destStartIndex + 1);
}

import { writeFileSync } from "fs";
import zlib from "zlib";
import crc32 from 'crc/crc32'; // 使用 node-crc 库计算 CRC32

// 辅助函数：将字符串转换为字节数组
function toBytes(v) {
  return v.split(``).map((v) => v.charCodeAt(0));
}

// 辅助函数：将数字编码为四字节值（大端）
function fourByte(n) {
  return [
    (n & 0xff000000) >> 24,
    (n & 0xff0000) >> 16,
    (n & 0xff00) >> 8,
    n & 0xff,
  ];
}

// 辅助函数：创建PNG块
function makeChunk(type, data = []) {
  const typeBytes = toBytes(type);
  const length = fourByte(data.length);
  const buffer = [...typeBytes, ...data];
  const crc = crc32(Buffer.from(buffer)); // crc32库需要Buffer作为输入
  return Buffer.from([...length, ...buffer, ...fourByte(crc)]);
}

// 定义字节序常量
const LITTLE_ENDIAN = Symbol(`little endian`);
const BIG_ENDIAN = Symbol(`big endian`);

// 检查当前系统字节序
const endian = (function checkEndian() {
  const buf = new ArrayBuffer(2);
  const u8 = new Uint8Array(buf);
  const u16 = new Uint16Array(buf);
  u8.set([0xaa, 0xbb], 0);
  return u16[0] === 0xbbaa ? LITTLE_ENDIAN : BIG_ENDIAN;
})();

// 图像尺寸
const [w, h] = [10, 10];

// 创建16位灰度像素数据
const pngPixels = new Uint16Array(w * h);
for (let x = 0; x < w; x++) {
  for (let y = 0; y < h; y++) {
    const i = x + y * w;
    // 示例像素值，范围0到65535
    pngPixels[i] = ((i / (w * h - 1)) * (2 ** 16 - 1)) | 0;
  }
}

// 将16位像素数据转换为8位字节数组
const pngPixels8 = new Uint8Array(pngPixels.buffer);

// 如果是小端系统，进行字节交换以符合PNG大端要求
if (endian === LITTLE_ENDIAN) {
  for (let i = 0, e = pngPixels8.length; i < e; i += 2) {
    let temp = pngPixels8[i];
    pngPixels8[i] = pngPixels8[i + 1];
    pngPixels8[i + 1] = temp;
  }
}

// 创建带过滤字节的扫描行数据
const filtered = new Uint8Array(pngPixels8.length + h);
for (let y = 0; y < h; y++) {
  const sourceStartIndex = 2 * y * w;
  const destStartIndex = y + sourceStartIndex;
  // 过滤字节默认为0x00 (无过滤)，已由Uint8Array初始化
  filtered.set(pngPixels8.subarray(sourceStartIndex, sourceStartIndex + 2 * w), destStartIndex + 1);
}

// PNG文件头魔术数字
const magic = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);

// IHDR块：16位灰度图像
const IHDR = makeChunk(`IHDR`, [
  ...fourByte(w), // 宽度
  ...fourByte(h), // 高度
  16, // 位深度: 16位
  0, // 颜色类型: 灰度
  0, // 压缩方法: 必须为0
  0, // 过滤方法: 必须为0
  0, // 隔行扫描方法: 无隔行扫描
]);

// IDAT块：压缩过滤后的像素数据
const IDAT = makeChunk(`IDAT`, zlib.deflateSync(filtered, { level: 9 }));

// IEND块：文件结束
const IEND = makeChunk(`IEND`);

// 拼接所有块并写入文件
const pngData = Buffer.concat([magic, IHDR, IDAT, IEND]);
writeFileSync(`test-out.png`, pngData);

console.log("PNG文件 'test-out.png' 已成功生成。");