canvas中的toDataURL方法可指定圖片壓縮後的格式及壓縮質(zhì)量,例如壓縮成webp格式:
canvas.toDataURL('image/webp',quality);
toDataURL
是用base64對影像進(jìn)行編碼的,且編碼後的來源檔案比編碼前大33%,參考位址,但是quality參數(shù)可以指定壓縮質(zhì)量,壓縮質(zhì)量越接近0,圖片壓縮力道越大。
base64只是對圖片對應(yīng)的二進(jìn)位碼,依照六位元對應(yīng)一個字元規(guī)則做轉(zhuǎn)換,轉(zhuǎn)碼後是反而比原圖片檔案大的。但對於小圖片而言,轉(zhuǎn)換後多出來的位元組傳輸遠(yuǎn)比多建立一個http連線開銷小,所以會利用base64對小圖轉(zhuǎn)碼來提高頁面載入速度。
至於圖片壓縮原理,簡單來說,透過演算法減少一張圖片上的顏色差異,犧牲圖片畫質(zhì)。例如緊鄰的顏色相近的四個像素的顏色資訊壓縮前大概佔16個位元組,壓縮後變成一個顏色就能減少近4倍。 quality用來控制色差的力度,值越小力度越大,顏色相差較大的兩個像素也會被處理,自然被壓縮後檔案就越小,畫質(zhì)就越爛
不行
是
控制圖片編碼格式的質(zhì)量,例如webp可以進(jìn)行有損壓縮,質(zhì)量越高,損失越小,檔案體積就越大