javascript - canvas压缩图片的原理是什么

问题描述

canvas中的toDataURL方法可指定图片压缩后的格式及压缩质量，例如压缩成webp格式：

canvas.toDataURL(’image/webp’,quality);

toDataURL是用base64对图像进行编码的，且编码后的源文件比编码前大33%，参考地址，但是quality参数可以指定压缩质量，压缩质量越接近于0，图片压缩力度越大。

问题1：采用base64编码将图片源文件变大了，那base64能压缩图片吗？问题2：用base64编码小图片只是为了减少http请求吗？问题3：canvas中的toDataURL方法压缩图片的原理是什么？quality参数具体做了什么？

问题解答

回答1：

base64只是对图片对应的二进制码，按照六位对应一个字符规则做转换，转码后是反而比原图片文件大的。但是对于小图片而言，经转换后多出来的字节传输远比多建立一个http连接开销小，所以会利用base64对小图转码来提高页面加载速度。至于图片压缩原理，简单来说，通过算法减少一张图片上的颜色差异，牺牲图片画质。比如紧挨着的颜色相近的四个像素的颜色信息压缩前大概占16个字节，压缩后变成一个颜色就能减少近4倍。quality用来控制色差的力度，值越小力度越大，颜色相差较大的两个像素也会被处理，自然被压缩后文件就越小，画质就越烂

回答2：

不行

是

控制图片编码格式的质量，例如webp可以进行有损压缩，质量越高，损失越小，文件体积就越大