一步一步解码 PNG 图片

解码 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 语法支持不好，请移步博客查看。