手把手教你用node从0开始写png图片
自己随手写的一个简单的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图片
上面的图片在很多浏览器中可能无法正常显示，因为填充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);
}
};
