两张 jpg 图片通过 canvas 合并成一张 jpg 后，为什么文件大小远大于原来两张图片之和？

[Reign]

以下两张图片：

https://i.imgur.com/MgbyBoA.jpg ，文件大小：30kb

https://i.imgur.com/mONiRZ7.jpg ，文件大小：55kb

现在通过的 js 来合并这两张图片为一张，代码在 jsfiddle： https://jsfiddle.net/fwsa6r2z/

设置了合并后的图片质量为 1.0，但是为什么合并后的文件大小是 296kb 远大于两张图片大小之和 85kb ？ 求好心 V 友解疑释惑一下，如果我想保证 js 合并后的的图片跟原来图片大小之和一样大，该怎么写这个代码？

[foru17]

https://stackoverflow.com/questions/9773154/canvas-todataurl-increases-file-size-of-image

the dataURL uses base64 encoding which makes it around 1.37 X larger
each browser processes the toDataURL function differently

https://stackoverflow.com/questions/11402329/base64-encoded-image-size

跟 Base64 编码有关。

[qdwang]

因为质量是 1 没有压缩
原本的两张图片是压缩过的

[Reign]

@foru17 谢谢，既然是“ it around 1.37 X larger ”，为何 296kb/85kb=3.48 ？？

[Reign]

@qdwang 跟原始两张图像压缩没压缩有关系吗？

[qdwang]

你搞两张质量 1.0 的 再合并试试看

[ysc3839]

这个是很难确定的，跟图像的编码算法有关。
没记错的话，canvas 保存的是 png 图片，png 是无损压缩，而 jpg 是有损压缩。