一步一步解码 PNG 图片

[vivaxy]

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData。

图片的二进制数据可以从 <canvas>，<img>，Object URLs，Image URLs，Blob 对象上获取到。参见浏览器图像转换手册。

ImageData 是一个包括了像素数据、图片宽高数据的对象。

示例图片

👆 这是一张我们接下去要解码的图片，但它太小了，放大了展示给大家看下。👇

二进制数据

我们先从浏览器的 <input> 标签上读取到 Blob 对象，然后拿到这张图片的二进制数据。

<input type="file" />
<script>
  const input = document.querySelector('input');
  input.addEventListener('change', async function(e) {
    const [file] = e.target.files;
    const arrayBuffer = await file.arrayBuffer();
    console.log('arrayBuffer', arrayBuffer);
    // TODO: Let's decode arrayBuffer
    const imageData = decode(arrayBuffer);
    console.log('imageData', imageData);
  });
</script>

得到的 arrayBuffer 如下：

由于 V2EX 对 Markdown Table 语法支持不好，请移步博客查看。

[phpfpm]

看了一遍：

1 这根 js 有半毛钱关系？
2 你为啥那么喜欢十进制？
3 宣传博客就直说。

[leonard916]

没啥卵用

[inhzus]

这种低质量的贴子真是有够好笑的

[zhujinliang]

果然 js 程序员没有一点数据结构的概念

[ochatokori]

@zhujinliang #4 地图炮开这么大？我想你一定身手不凡

[xiangyuecn]

@ #4 肯定身手不凡。 #3 楼主的这篇文章质量并不低，应该是按照他实际学习解码过程一点点敲出来的，记录的自己知道的一点东西而已，有啥好笑的。 就不 @他们的名字了

[dioxide]

你这一步步 ，只展示了前半步啊

[xihefeng]

这垃圾论坛也真是搞笑。怎么这么多喷子，楼主分享下自己的学习过程，喷子们牛逼秀你们的呀

[locoz]

写得挺清晰明了的，看得出是花了很多时间研究整理出来的文章，这都有人能喷低质量…垃圾营销号的水文看太多产生的应激反应？

[locoz]

不过跟 js 确实没太大关系，不管是标题还是内容，基本都没怎么提到和用到 js，其实可以直接发到分享创造里的。

[rus4db]

大致看了一下原文。对于如此底层的技术，能深入剖析下去、并且乐于分享，这是值得鼓励的。
我也研究过 JPEG、MP3 和 H.264 的原理，都是很冷 guo 门 shi 的技术，感兴趣的人并不多，所以才有分享的必要。
因此，感谢您的分享。分享是 IT 人应有的态度。
如果您感兴趣，欢迎光临我的博客 https://mikukonai.com/ ，期待与您切磋。

最后，请不要在意那些没有营养的回复。

[DonaldY]

。。。
估计大家只是反感这种行为。

倘若此楼主把文章贴完整，文末再帖博客地址，也不会有这些声言。

既... 又... 唉。

起码现在推广的博文（或营销号），大部分都在文末贴二维码。

[cz5424]

分析这种文件我比较喜欢 16 进制，10 进制有点看不惯，建议楼主用一个比较明确的展示数据结构，比如结构体，再一点一点的解析

[JerryCha]

点进博客和不点进博客，这篇文章完全给人是两种印象。
因为表格及后半部分没贴上来，只看前半部分完全就是一篇垃圾文章。但是深入 PNG 规范估计就没几个人做得到了。

[xrlin]

以前学图像处理看过一些标准，还有那些用其它文件伪装成图片的也是通过添加头部等数据信息来处理，这些东西就是内容太多而且一般用不到，就像网络协议一样，平常也用不到精确到某个 bit 到数据组成，能耐心整理，楼主毅力可嘉。

[EridanusSora]

文章质量不低呀，楼上某些人怕是看都没看吧

binary 的东西还是十六进制分析起来舒服，转成十进制确实有点多此一举了

[mingmeng]

看完了
给楼主一个小小的建议，这篇博客的 js 并不重要，主要还是 png 格式分析，不建议发在 js 节点
文章质量不错，感谢楼主的分享