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