V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
vivaxy
V2EX  ›  JavaScript

一步一步解码 PNG 图片

  •  
  •   vivaxy · 2019-12-07 14:48:14 +08:00 · 5575 次点击
    这是一个创建于 1574 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    17 条回复    2019-12-08 04:05:43 +08:00
    phpfpm
        1
    phpfpm  
       2019-12-07 15:13:16 +08:00   ❤️ 7
    看了一遍:

    1 这根 js 有半毛钱关系?
    2 你为啥那么喜欢十进制?
    3 宣传博客就直说。
    leonard916
        2
    leonard916  
       2019-12-07 18:31:02 +08:00
    没啥卵用
    inhzus
        3
    inhzus  
       2019-12-07 18:45:38 +08:00 via Android   ❤️ 3
    这种低质量的贴子真是有够好笑的
    zhujinliang
        4
    zhujinliang  
       2019-12-07 19:03:13 +08:00 via iPhone   ❤️ 1
    果然 js 程序员没有一点数据结构的概念
    ochatokori
        5
    ochatokori  
       2019-12-07 19:06:59 +08:00 via Android   ❤️ 2
    @zhujinliang #4 地图炮开这么大?我想你一定身手不凡
    xiangyuecn
        6
    xiangyuecn  
       2019-12-07 19:19:01 +08:00   ❤️ 1
    @ #4 肯定身手不凡。 #3 楼主的这篇文章质量并不低,应该是按照他实际学习解码过程一点点敲出来的,记录的自己知道的一点东西而已,有啥好笑的。 就不 @他们的名字了
    dioxide
        7
    dioxide  
       2019-12-07 19:26:19 +08:00
    你这一步步 ,只展示了前半步啊
    xihefeng
        8
    xihefeng  
       2019-12-07 19:37:15 +08:00 via Android   ❤️ 2
    这垃圾论坛也真是搞笑。怎么这么多喷子,楼主分享下自己的学习过程,喷子们牛逼秀你们的呀
    locoz
        9
    locoz  
       2019-12-07 20:54:36 +08:00 via Android
    写得挺清晰明了的,看得出是花了很多时间研究整理出来的文章,这都有人能喷低质量…垃圾营销号的水文看太多产生的应激反应?
    locoz
        10
    locoz  
       2019-12-07 20:57:20 +08:00 via Android
    不过跟 js 确实没太大关系,不管是标题还是内容,基本都没怎么提到和用到 js,其实可以直接发到分享创造里的。
    rus4db
        11
    rus4db  
       2019-12-07 21:31:02 +08:00
    大致看了一下原文。对于如此底层的技术,能深入剖析下去、并且乐于分享,这是值得鼓励的。
    我也研究过 JPEG、MP3 和 H.264 的原理,都是很冷 guo 门 shi 的技术,感兴趣的人并不多,所以才有分享的必要。
    因此,感谢您的分享。分享是 IT 人应有的态度。
    如果您感兴趣,欢迎光临我的博客 https://mikukonai.com/ ,期待与您切磋。

    最后,请不要在意那些没有营养的回复。
    DonaldY
        12
    DonaldY  
       2019-12-07 21:50:09 +08:00
    。。。
    估计大家只是反感这种行为。

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

    既... 又... 唉。

    起码现在推广的博文(或营销号),大部分都在文末贴二维码。
    cz5424
        13
    cz5424  
       2019-12-07 21:57:28 +08:00 via iPhone
    分析这种文件我比较喜欢 16 进制,10 进制有点看不惯,建议楼主用一个比较明确的展示数据结构,比如结构体,再一点一点的解析
    JerryCha
        14
    JerryCha  
       2019-12-08 00:00:26 +08:00
    点进博客和不点进博客,这篇文章完全给人是两种印象。
    因为表格及后半部分没贴上来,只看前半部分完全就是一篇垃圾文章。但是深入 PNG 规范估计就没几个人做得到了。
    xrlin
        15
    xrlin  
       2019-12-08 00:09:16 +08:00
    以前学图像处理看过一些标准,还有那些用其它文件伪装成图片的也是通过添加头部等数据信息来处理,这些东西就是内容太多而且一般用不到,就像网络协议一样,平常也用不到精确到某个 bit 到数据组成,能耐心整理,楼主毅力可嘉。
    EridanusSora
        16
    EridanusSora  
       2019-12-08 00:28:50 +08:00 via Android
    文章质量不低呀,楼上某些人怕是看都没看吧

    binary 的东西还是十六进制分析起来舒服,转成十进制确实有点多此一举了
    mingmeng
        17
    mingmeng  
       2019-12-08 04:05:43 +08:00 via iPad
    看完了
    给楼主一个小小的建议,这篇博客的 js 并不重要,主要还是 png 格式分析,不建议发在 js 节点
    文章质量不错,感谢楼主的分享
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2412 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 15:58 · PVG 23:58 · LAX 08:58 · JFK 11:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.