Reader

一步一步解码 PNG 图片

2019-12-07 00:00:00 +0000 UTC | vivaxy's Blog | 博客

解码 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...