javascript - Was ist das Prinzip der Leinwandkomprimierung von Bildern?

Question

Die toDataURL-Methode im Canvas kann das Format und die Komprimierungsqualität des Bildes nach der Komprimierung angeben, beispielsweise in das WebP-Format komprimieren:

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

toDataURLDas Bild wird mit Base64 kodiert und die kodierte Quelldatei ist 33 % größer als vor der Kodierung. Sehen Sie sich die Adresse an, aber der Qualitätsparameter kann die Komprimierungsqualität angeben. Je näher die Komprimierungsqualität bei 0 liegt, desto besser ist das Bild Kompression.

Frage 1: Kann Base64 das Bild komprimieren, wenn Base64-Kodierung zum Vergrößern der Bildquelldatei verwendet wird?

Frage 2: Dient die Codierung kleiner Bilder mit Base64 nur dazu, http-Anfragen zu reduzieren?

Frage 3: Was ist das Prinzip der Komprimierung von Bildern mit der toDataURL-Methode in Canvas? Was genau macht der Qualitätsparameter?

Answer 1

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

Answer 2

1. 不行

2. 是

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