手把手教你用node从0开始写png图片
发布于 4 个月前 作者 dislido 868 次浏览 来自 分享

自己随手写的一个简单的png图片类,记录一下过程,欢迎提问和建议

我们require什么?

我们甚至不需要node_modules文件夹

const zlib = require('zlib'); // 我们需要对png数据块进行deflate压缩
const fs = require('fs'); // 输出图片到文件
const crc = require('./crc'); // 计算一个buffer的crc校验码,你可以用任何自己喜欢的实现方式

你不需要详细了解crc校验的细节,感兴趣的话可以自行百度,这个文件我会附在后面

png文件的构成

png文件是由一个个数据块组成的,每个数据块包含4或3个部分: LENGTH: 这个数据块chunk data部分的长度(字节),32位无符号整数(4字节) CHUNK TYPE: 这个数据块的类型,固定4字节(4个英文字符) CHUNK DATA: 数据块的内容,根据chunk type决定,长度不固定,LENGTH=0时不存在该部分 CRC: 对CHUNK TYPE+CHUNK DATA进行CRC计算生成的校验码(4字节)

png的头部——0x89+'PNG'+0x0d0a1a0a

所有png文件的开头都有固定的8字节,用来让读取它的程序知道这是个png文件:

Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])

0x50,0x4e,0x47=‘PNG’

第一个数据块——IHDR

png文件的第一个数据块,固定13字节信息,包含了png文件的基本信息 width 4字节 图片宽度 height 4字节 图片高度 Bit depth 1字节 图像位深,这里我们固定设置为8(RGBA每通道各占8位(0~255)) Colour type 1字节 颜色类型,这里我们固定设置为6(RGBA带透明度的彩图) Compression method 1字节 不用管 Filter method 1字节 不用管 Interlace method 1字节 不用管

IHDR在一开始就已经确定了全部内容,所以写一个生成IHDR Buffer的函数吧

function ihdr(width = 0,
  height = 0,
  bitDepth = 8,
  colourType = 6,
  compressionMethod = 0,
  filterMethod = 0,
  interlaceMethod = 0) {
  // 写入数据块内容
  const buf = Buffer.allocUnsafe(17);

  buf.write('IHDR', 0); // CHUNK TYPE 方便起见这里直接和内容写在同一个buffer里了
  // 写 CHUNK DATA
  buf.writeUInt32BE(width, 4);
  buf.writeUInt32BE(height, 8);
  buf.writeUInt8(bitDepth, 12);
  buf.writeUInt8(colourType, 13);
  buf.writeUInt8(compressionMethod, 14);
  buf.writeUInt8(filterMethod, 15);
  buf.writeUInt8(interlaceMethod, 16);

  // crc 由数据块名+数据块内容进行crc计算获得
  const ihdrCrc = Buffer.allocUnsafe(4);
  ihdrCrc.writeInt32BE(crc(buf));

  // png数据块结构:4字节数据块内容长度,4字节数据块名,数据块内容,4字节crc
  return Buffer.concat([Buffer.from([0, 0, 0, 13]), buf, ihdrCrc]);
}

在继续之前我们先写一个类吧

class PNG {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    this.ihdr = ihdr(width, height);
  }
}

另一个数据块——IDAT

这是用来储存图像内容的数据块,结构很简单 LENGTH:我们现在暂时不知道,留着 CHUNK TYPE:Buffer.from('IDAT')简单粗暴 CHUNK DATA:我们设置的是每通道8位(每像素32位=4字节)的图片,所以要申请的内存大小:宽*高*每像素4字节+图像高度 在png图片中,每一行像素开头会有1字节的行标志位0x00,所以我们需要额外的height字节 idat数据块应包含的是被deflate压缩后的数据,所以我们现在只能先初始化一下这个数据块,留到最后再处理:

constructor(width, height) {
  // ...

  // 填充255,则默认是一个纯白的图片
  this.idat = Buffer.alloc((width * height * 4) + height, 255);
}

CRC:虽然已经有了CHUNK TYPE和CHUNK DATA,但因为CHUNK DATA还需进行压缩所以暂时无法计算CRC

写一个处理idat数据块的函数:

  getIdat() {
    // 数据块名
    const idatName = Buffer.from('IDAT');
    // idat数据块内容需要进行一次deflate压缩
    const idatData = zlib.deflateSync(this.idat);
    // 长度
    const idatLen = Buffer.alloc(4);
    idatLen.writeUInt32BE(this.idat.byteLength);
    // crc
    const idatCrc = Buffer.allocUnsafe(4);
    idatCrc.writeInt32BE(crc(Buffer.concat([idatName, this.idat])));
    return Buffer.concat([idatLen, idatName, idatData, idatCrc]);
  }

结束标志

简单粗暴:Buffer.from('IEND')

输出到png文件

简单的按顺序合并一下各数据块就可以写到文件里了

writeFile(path) {
    const idat = this.getIdat();

    // 合并数据块为png文件buffer
    const buf = Buffer.concat([
      Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]), // 固定的png头
      this.ihdr,  // ihdr数据块
      idat, // idat数据块
      Buffer.from('IEND'), // 固定的png尾
    ]);

    fs.writeFileSync(path, buf);
  }

然后我们可以立刻试用一下了:

const p = new PNG(30, 30);
p.writeFile('./png.png');

这样就能生成一个30*30的纯白色图片了

设置任意像素的颜色

目前我们已经可以生成指定大小的纯白色png图片了,下面我们写一个函数来设置图片的内容,很简单

  setPixel(x, y, pixel) {
    // 计算指定像素在idat buffer中的实际位置
    const pos = (this.width * y * 4) + y + 1 + (x * 4);
    this.idat.writeUInt32BE(pixel, pos);
  }

那么一个有基本功能的png类就完成了

const p = new PNG(30, 30);
for(let i = 0; i < 30; i++) {
  png.setPixel(i, 15, 0xFF0000FF); // 红 绿 蓝 不透明度
}
p.writeFile('./redLine.png');

生成了一张中间有一条红线的PNG图片 redLine.png 上面的图片在很多浏览器中可能无法正常显示,因为填充buffer时把本应是0x00的行标志位填充为了0xff,少数图片解码器可以自动修复此错误 感兴趣的话可以自己继续实现画线,画其他图形的功能

引用资料

W3C PNG标准https://www.w3.org/TR/2003/REC-PNG-20031110/

4 回复

crc.js

const TABLE = [
  0x00000000, 0x77073096, 0xee0e612c, 0x990951ba, 0x076dc419,
  0x706af48f, 0xe963a535, 0x9e6495a3, 0x0edb8832, 0x79dcb8a4,
  0xe0d5e91e, 0x97d2d988, 0x09b64c2b, 0x7eb17cbd, 0xe7b82d07,
  0x90bf1d91, 0x1db71064, 0x6ab020f2, 0xf3b97148, 0x84be41de,
  0x1adad47d, 0x6ddde4eb, 0xf4d4b551, 0x83d385c7, 0x136c9856,
  0x646ba8c0, 0xfd62f97a, 0x8a65c9ec, 0x14015c4f, 0x63066cd9,
  0xfa0f3d63, 0x8d080df5, 0x3b6e20c8, 0x4c69105e, 0xd56041e4,
  0xa2677172, 0x3c03e4d1, 0x4b04d447, 0xd20d85fd, 0xa50ab56b,
  0x35b5a8fa, 0x42b2986c, 0xdbbbc9d6, 0xacbcf940, 0x32d86ce3,
  0x45df5c75, 0xdcd60dcf, 0xabd13d59, 0x26d930ac, 0x51de003a,
  0xc8d75180, 0xbfd06116, 0x21b4f4b5, 0x56b3c423, 0xcfba9599,
  0xb8bda50f, 0x2802b89e, 0x5f058808, 0xc60cd9b2, 0xb10be924,
  0x2f6f7c87, 0x58684c11, 0xc1611dab, 0xb6662d3d, 0x76dc4190,
  0x01db7106, 0x98d220bc, 0xefd5102a, 0x71b18589, 0x06b6b51f,
  0x9fbfe4a5, 0xe8b8d433, 0x7807c9a2, 0x0f00f934, 0x9609a88e,
  0xe10e9818, 0x7f6a0dbb, 0x086d3d2d, 0x91646c97, 0xe6635c01,
  0x6b6b51f4, 0x1c6c6162, 0x856530d8, 0xf262004e, 0x6c0695ed,
  0x1b01a57b, 0x8208f4c1, 0xf50fc457, 0x65b0d9c6, 0x12b7e950,
  0x8bbeb8ea, 0xfcb9887c, 0x62dd1ddf, 0x15da2d49, 0x8cd37cf3,
  0xfbd44c65, 0x4db26158, 0x3ab551ce, 0xa3bc0074, 0xd4bb30e2,
  0x4adfa541, 0x3dd895d7, 0xa4d1c46d, 0xd3d6f4fb, 0x4369e96a,
  0x346ed9fc, 0xad678846, 0xda60b8d0, 0x44042d73, 0x33031de5,
  0xaa0a4c5f, 0xdd0d7cc9, 0x5005713c, 0x270241aa, 0xbe0b1010,
  0xc90c2086, 0x5768b525, 0x206f85b3, 0xb966d409, 0xce61e49f,
  0x5edef90e, 0x29d9c998, 0xb0d09822, 0xc7d7a8b4, 0x59b33d17,
  0x2eb40d81, 0xb7bd5c3b, 0xc0ba6cad, 0xedb88320, 0x9abfb3b6,
  0x03b6e20c, 0x74b1d29a, 0xead54739, 0x9dd277af, 0x04db2615,
  0x73dc1683, 0xe3630b12, 0x94643b84, 0x0d6d6a3e, 0x7a6a5aa8,
  0xe40ecf0b, 0x9309ff9d, 0x0a00ae27, 0x7d079eb1, 0xf00f9344,
  0x8708a3d2, 0x1e01f268, 0x6906c2fe, 0xf762575d, 0x806567cb,
  0x196c3671, 0x6e6b06e7, 0xfed41b76, 0x89d32be0, 0x10da7a5a,
  0x67dd4acc, 0xf9b9df6f, 0x8ebeeff9, 0x17b7be43, 0x60b08ed5,
  0xd6d6a3e8, 0xa1d1937e, 0x38d8c2c4, 0x4fdff252, 0xd1bb67f1,
  0xa6bc5767, 0x3fb506dd, 0x48b2364b, 0xd80d2bda, 0xaf0a1b4c,
  0x36034af6, 0x41047a60, 0xdf60efc3, 0xa867df55, 0x316e8eef,
  0x4669be79, 0xcb61b38c, 0xbc66831a, 0x256fd2a0, 0x5268e236,
  0xcc0c7795, 0xbb0b4703, 0x220216b9, 0x5505262f, 0xc5ba3bbe,
  0xb2bd0b28, 0x2bb45a92, 0x5cb36a04, 0xc2d7ffa7, 0xb5d0cf31,
  0x2cd99e8b, 0x5bdeae1d, 0x9b64c2b0, 0xec63f226, 0x756aa39c,
  0x026d930a, 0x9c0906a9, 0xeb0e363f, 0x72076785, 0x05005713,
  0x95bf4a82, 0xe2b87a14, 0x7bb12bae, 0x0cb61b38, 0x92d28e9b,
  0xe5d5be0d, 0x7cdcefb7, 0x0bdbdf21, 0x86d3d2d4, 0xf1d4e242,
  0x68ddb3f8, 0x1fda836e, 0x81be16cd, 0xf6b9265b, 0x6fb077e1,
  0x18b74777, 0x88085ae6, 0xff0f6a70, 0x66063bca, 0x11010b5c,
  0x8f659eff, 0xf862ae69, 0x616bffd3, 0x166ccf45, 0xa00ae278,
  0xd70dd2ee, 0x4e048354, 0x3903b3c2, 0xa7672661, 0xd06016f7,
  0x4969474d, 0x3e6e77db, 0xaed16a4a, 0xd9d65adc, 0x40df0b66,
  0x37d83bf0, 0xa9bcae53, 0xdebb9ec5, 0x47b2cf7f, 0x30b5ffe9,
  0xbdbdf21c, 0xcabac28a, 0x53b39330, 0x24b4a3a6, 0xbad03605,
  0xcdd70693, 0x54de5729, 0x23d967bf, 0xb3667a2e, 0xc4614ab8,
  0x5d681b02, 0x2a6f2b94, 0xb40bbe37, 0xc30c8ea1, 0x5a05df1b,
  0x2d02ef8d,
];

module.exports = (buffer) => {
  let crc = -1;
  buffer.forEach((e) => {
    crc = TABLE[(crc ^ e) & 255] ^ (crc >>> 8);
  });
  return (crc ^ -1);
};

index.js

const zlib = require('zlib');
const fs = require('fs');
const crc = require('./crc');

function ihdr(width = 0,
  height = 0,
  bitDepth = 8,
  colourType = 6,
  compressionMethod = 0,
  filterMethod = 0,
  interlaceMethod = 0) {
  const buf = Buffer.allocUnsafe(17);

  buf.write('IHDR', 0);

  buf.writeUInt32BE(width, 4);
  buf.writeUInt32BE(height, 8);
  buf.writeUInt8(bitDepth, 12);
  buf.writeUInt8(colourType, 13);
  buf.writeUInt8(compressionMethod, 14);
  buf.writeUInt8(filterMethod, 15);
  buf.writeUInt8(interlaceMethod, 16);

  const ihdrCrc = Buffer.allocUnsafe(4);
  ihdrCrc.writeInt32BE(crc(buf));
  return Buffer.concat([Buffer.from([0, 0, 0, 13]), buf, ihdrCrc]);
}

module.exports = class {
  constructor(width, height) {
    this.width = width;
    this.height = height;

    this.ihdr = ihdr(width, height);
    this.idat = Buffer.alloc((width * height * 4) + height, 255);
  }

  setPixel(x, y, pixel) {
    const pos = (this.width * y * 4) + y + 1 + (x * 4);
    this.idat.writeUInt32BE(pixel, pos);
  }

  getIdat() {
    const idatName = Buffer.from('IDAT');
    const idatData = zlib.deflateSync(this.idat);
    const idatLen = Buffer.alloc(4);
    idatLen.writeUInt32BE(this.idat.byteLength);
    const idatCrc = Buffer.allocUnsafe(4);
    idatCrc.writeInt32BE(crc(Buffer.concat([idatName, this.idat])));
    return Buffer.concat([idatLen, idatName, idatData, idatCrc]);
  }
  writeFile(path) {
    const idat = this.getIdat();

    const buf = Buffer.concat([
      Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
      this.ihdr,
      idat,
      Buffer.from('IEND'),
    ]);

    fs.writeFileSync(path, buf);
  }
};

不错,加油

回到顶部