JavaScript PNG 图片编码和解码

PNG 解码是指将一张 PNG 图片的二进制数据转换成像素点数据 ImageData。

PNG 的二进制数据有不少方式获取。

在浏览器中能够获得 ArrayBuffer 类型的二进制数据：

fetch(url).then(res => res.arrayBuffer()).then(res => { console.log(arrayBuffer) });

在 Node.js 中，能够获得 Buffer 类型的二进制数据：

console.log(fs.readFileSync(filename))

在微信小程序中能够获得 ArrayBuffer 类型的二进制数据：

wx.request({
  url,
  responseType: 'arraybuffer',
  success: (res) => { console.log(res.data); },
});

ImageData.data 是一个 Uint8ClampedArray，其中以 R、G、B、A 的顺序保存了像素点的数据，每四项表示一个像素点。

Uint8ClampedArray 是一种 TypedArray，存储了 0-255 的数据。其中 U 表示 unsigned，也就是无符号（都是正值）。8 表示 8 位，也就是其中的数据值不能超过 2 ^ 8 = 256。Clamped 表示若是数据值小于 0，则变成 0，若是大于 255，则变成 255。与之相似的 TypedArray 还有 Uint8Array，初始化的值若是不在 0-255 之间，则加或减 256，直到符合要求。还有 Int8Array，里面的值能够带符号，也就是说能够是负数。

TypedArray 是 JavaScript 中用来存储二进制数据的一种数据格式，相似于数组。可是 TypedArray 中存放的数据类型已经肯定，执行引擎很容易分配内存，因此 TypedArray 更快。在 Node.js 中，在 Int8Array 的基础上实现了 Buffer，提供了二进制数据流的存储和操做。

解码

PNG 的二进制数据能够分为 2 大部分：文件签名（Signature）和数据块（Chunks）。

Chunks 分为 IHDR、PLTE、TRNS、GAMA、IDAT 和 IEND。

Signature

PNG 的文件签名是 [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]，文件头部须要是这样的数据。

Chunks

在处理了 Signature 后，每次读取 8 个字节的数据做为 Chunk 标示，8 个字节中的前 4 个字节表示这个 Chunk 占用的长度，单位是字节；后 4 个字节表示 Chunk 的类型。使用 Buffer 的 readUInt32BE 方法能够轻松地拿到这些数据。

Chunk 之间可能有冗余的内容，当 Chunk 没有开始，遇到冗余内容的时候，咱们须要跳过长度 + 4 个字节。

Chunks 一共分红 6 个类型（括号中的是 Chunk 标示）：IHDR（0x49484452）、PLTE（0x504c5445）、TRNS（0x74524e53）、GAMA（0x67414d41）、IDAT（0x49444154） 和 IEND（0x49454e44）。IHDR 必须是第一个 Chunk；IEND 必须是最后一个；IDAT 存放着压缩过的图像数据。

IHDR 中存放了图片的宽度（width）、高度（height）、像素位数（depth）、颜色类型（colorType）、压缩方式（compression）（只有 0）、过滤器类型（filter）（只有 0）、是不是渐进式（interlace）。

解码 IDAT

经过对 Chunks 的分段，咱们能够拿到 IDAT 部分的数据。使用 zlib 的 inflate 方法能够把压缩过的数据解码出来。解码后的数据里，每 5 个字节表示一个像素，其中第一个字节表示过滤器的类型。经过过滤器（filter）把数据还原，最后数据转换成像素数据，就能够获得 ImageData 了。

渐进式加载（interlace）

保存 PNG 图片的时候能够选择是否保存为渐进式。渐进式的 PNG 图片能够在加载过程当中从模糊到清晰。

PNG 的渐进式加载采用了 Adam7 算法。将像素点从新排序，能够作到先展现较不清晰的图片，再展现较清晰的图片。Adam7 算法一共有 7 步。

到第 7 步时能够拿到所有像素信息，所以在解码过程当中须要判断渐进式的开关，并重排像素数据。

编码

编码过程是一个逆向的解码。先写入文件签名，写入 IHDR 数据（文件宽高等），写入 GAMA 信息，将 ImageData 进行过滤（经过过滤能够提高压缩率），将过滤后的数据用 zlib 压缩，做为 IDAT 写入，最后写入 IEND。

源码能够参考 png，基于 pngjs 的同步源码将 Node.js 的 zlib 替换成了浏览器端能够运行的 pako。再添加 buffer 以来就能够在浏览器上运行了。

参考资料

• Portable Network Graphics - Wikipedia
• ImageData - Web APIs
• Uint8ClampedArray - JavaScript
• TypedArray - JavaScript
• Uint8Array - JavaScript
• Int8Array - JavaScript
• Buffer
• Portable Network Graphics (PNG) Specification (Second Edition)
• png - What does the interlaced option in Photoshop do?
• Adam7 algorithm - Wikipedia
• pngjs3
• pngjs
• node-png
• node-pngjs
• png-async
• pngparse
• png-demo
• pako
• buffer