首頁猿問 canvas壓縮圖片的原理是什么

canvas壓縮圖片的原理是什么

JavaScript

HUX布斯 2018-11-16 19:19:56

canvas中的toDataURL方法可指定圖片壓縮后的格式及壓縮質(zhì)量，例如壓縮成webp格式：canvas.toDataURL('image/webp',quality);toDataURL是用base64對(duì)圖像進(jìn)行編碼的，且編碼后的源文件比編碼前大33%，參考地址，但是quality參數(shù)可以指定壓縮質(zhì)量，壓縮質(zhì)量越接近于0，圖片壓縮力度越大。問題1：采用base64編碼將圖片源文件變大了，那base64能壓縮圖片嗎？問題2：用base64編碼小圖片只是為了減少http請(qǐng)求嗎？問題3：canvas中的toDataURL方法壓縮圖片的原理是什么？quality參數(shù)具體做了什么？

查看完整描述

1 回答

動(dòng)漫人物

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超10個(gè)贊

base64只是對(duì)圖片對(duì)應(yīng)的二進(jìn)制碼，按照六位對(duì)應(yīng)一個(gè)字符規(guī)則做轉(zhuǎn)換，轉(zhuǎn)碼后是反而比原圖片文件大的。但是對(duì)于小圖片而言，經(jīng)轉(zhuǎn)換后多出來的字節(jié)傳輸遠(yuǎn)比多建立一個(gè)http連接開銷小，所以會(huì)利用base64對(duì)小圖轉(zhuǎn)碼來提高頁面加載速度。
至于圖片壓縮原理，簡(jiǎn)單來說，通過算法減少一張圖片上的顏色差異，犧牲圖片畫質(zhì)。比如緊挨著的顏色相近的四個(gè)像素的顏色信息壓縮前大概占16個(gè)字節(jié)，壓縮后變成一個(gè)顏色就能減少近4倍。quality用來控制色差的力度，值越小力度越大，顏色相差較大的兩個(gè)像素也會(huì)被處理，自然被壓縮后文件就越小，畫質(zhì)就越爛

反對(duì) 回復(fù) 2018-12-23