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可以進行有損壓縮，質量越高，損失越小，文件體積就越大