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

2020-08-26 16:54:28 +08:00
 shentibeitaokong

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

2977 次点击
所在节点    JavaScript
12 条回复
stevenhawking
2020-08-26 17:47:37 +08:00
二进制的数据被 base64 后,字节组合的可能性大大缩减;于是熵增加了,可压缩(重复)的部分变小。
misaka19000
2020-08-26 17:55:49 +08:00
@stevenhawking #1 我觉得不会吧,信息所携带的熵是固定的,那么即使转成 base64 之后再压缩应该也有一样的压缩效果才对
xqdoo00o
2020-08-26 20:03:17 +08:00
jszip 默认 store 应该是没压缩的,你可以用压缩软件看看到底是啥方式,deflate 还是 store
KuroNekoFan
2020-08-26 20:52:37 +08:00
base64 编码本身就会产生冗余吧
xqdoo00o
2020-08-26 21:44:18 +08:00
用 canvas 生成 base64 。。。如果图片是 jpg 这种有损压缩格式,用 canvas 画出来肯定变大。
直接 filereader 读就行了。
codehz
2020-08-26 21:59:46 +08:00
@misaka19000 #2 这里的问题是不是单纯的转换,而是重编码了。。它先把图片画到 canvas 里,然后用 canvas.toDataURL 的方法重新编码成 png,即使原图也是 png 格式,这样重新编码的方法造成编码参数的不一致也有可能造成体积增加。。。
JerryCha
2020-08-27 00:59:01 +08:00
你用来测试的图片是什么格式什么编码的。
假若你输入的是 JPG,你用 canvas 画,再从 canvas 读出来,这个操作最终获得的是原始的 RGBA 数据,不是经过 JPEG 编码的图像压缩数据。
你直接二进制读,原封不动的送去压缩,是对压缩过的数据再压缩一遍。
网上搜到的文章,供参考 [图片之旅 - 了解各种图形格式的编码方式]( https://juejin.im/entry/6844903439525216270)
qwerthhusn
2020-08-27 09:51:40 +08:00
这个简单,找个图片,看一下原大小,再 base64 解码一下比对
okaku
2020-08-27 12:46:43 +08:00
意义不明 如果不对图片做其他处理没有必要 绘制到 canvas 上。绘制再压缩成 png 格式多了透明通道是比 jpg 原图大。
shentibeitaokong
2020-08-28 17:54:24 +08:00
@xqdoo00o 感谢大佬, 非常感谢 !我尝试了 filereader 的 base64 确实体积和之前一摸一样,但是这不太适合我的场景,毕竟 filereader 先要把 url 转成 blob 再读取解析返回 bas64
shentibeitaokong
2020-08-28 17:54:54 +08:00
@okaku 是的,没有考虑这一层次,png 与 jpg,感谢
shentibeitaokong
2020-08-28 17:56:37 +08:00
@codehz
@JerryCha 感谢两位大佬,确实是 png 格式造成的体积过大,如果将其变成 image/jpeg,其体积只会比原来大大概 1/6

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/701649

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX