搜索

首页  >  问答  >  正文

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参数具体做了什么?

给我你的怀抱给我你的怀抱2737 天前1137

全部回复(2)我来回复

  • 滿天的星座

    滿天的星座2017-06-26 10:57:55

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

    回复
    0
  • 黄舟

    黄舟2017-06-26 10:57:55

    1. 不行

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

    回复
    0
  • 取消回复