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

问个问题,为什么使用 jszip 打包图片,使用 base64 打包会比使用 blob 打包下来的体积几乎大 6 倍

  •  
  •   shentibeitaokong · 2020-08-26 16:54:28 +08:00 · 2927 次点击
    这是一个创建于 1548 天前的主题,其中的信息可能已经有所发展或是发生改变。

    跪求大佬能给点思路,图片转 base64 只会比原来大概大 1/3 呀,我的代码如下 https://github.com/Stuk/jszip/issues/709 跪求大佬 感谢!

    12 条回复    2020-08-28 17:56:37 +08:00
    stevenhawking
        1
    stevenhawking  
       2020-08-26 17:47:37 +08:00
    二进制的数据被 base64 后,字节组合的可能性大大缩减;于是熵增加了,可压缩(重复)的部分变小。
    misaka19000
        2
    misaka19000  
       2020-08-26 17:55:49 +08:00
    @stevenhawking #1 我觉得不会吧,信息所携带的熵是固定的,那么即使转成 base64 之后再压缩应该也有一样的压缩效果才对
    xqdoo00o
        3
    xqdoo00o  
       2020-08-26 20:03:17 +08:00
    jszip 默认 store 应该是没压缩的,你可以用压缩软件看看到底是啥方式,deflate 还是 store
    KuroNekoFan
        4
    KuroNekoFan  
       2020-08-26 20:52:37 +08:00 via iPhone
    base64 编码本身就会产生冗余吧
    xqdoo00o
        5
    xqdoo00o  
       2020-08-26 21:44:18 +08:00
    用 canvas 生成 base64 。。。如果图片是 jpg 这种有损压缩格式,用 canvas 画出来肯定变大。
    直接 filereader 读就行了。
    codehz
        6
    codehz  
       2020-08-26 21:59:46 +08:00   ❤️ 1
    @misaka19000 #2 这里的问题是不是单纯的转换,而是重编码了。。它先把图片画到 canvas 里,然后用 canvas.toDataURL 的方法重新编码成 png,即使原图也是 png 格式,这样重新编码的方法造成编码参数的不一致也有可能造成体积增加。。。
    JerryCha
        7
    JerryCha  
       2020-08-27 00:59:01 +08:00   ❤️ 1
    你用来测试的图片是什么格式什么编码的。
    假若你输入的是 JPG,你用 canvas 画,再从 canvas 读出来,这个操作最终获得的是原始的 RGBA 数据,不是经过 JPEG 编码的图像压缩数据。
    你直接二进制读,原封不动的送去压缩,是对压缩过的数据再压缩一遍。
    网上搜到的文章,供参考 [图片之旅 - 了解各种图形格式的编码方式]( https://juejin.im/entry/6844903439525216270)
    qwerthhusn
        8
    qwerthhusn  
       2020-08-27 09:51:40 +08:00
    这个简单,找个图片,看一下原大小,再 base64 解码一下比对
    okaku
        9
    okaku  
       2020-08-27 12:46:43 +08:00 via iPhone
    意义不明 如果不对图片做其他处理没有必要 绘制到 canvas 上。绘制再压缩成 png 格式多了透明通道是比 jpg 原图大。
    shentibeitaokong
        10
    shentibeitaokong  
    OP
       2020-08-28 17:54:24 +08:00
    @xqdoo00o 感谢大佬, 非常感谢 !我尝试了 filereader 的 base64 确实体积和之前一摸一样,但是这不太适合我的场景,毕竟 filereader 先要把 url 转成 blob 再读取解析返回 bas64
    shentibeitaokong
        11
    shentibeitaokong  
    OP
       2020-08-28 17:54:54 +08:00
    @okaku 是的,没有考虑这一层次,png 与 jpg,感谢
    shentibeitaokong
        12
    shentibeitaokong  
    OP
       2020-08-28 17:56:37 +08:00
    @codehz
    @JerryCha 感谢两位大佬,确实是 png 格式造成的体积过大,如果将其变成 image/jpeg,其体积只会比原来大大概 1/6
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1056 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:05 · PVG 03:05 · LAX 11:05 · JFK 14:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.