Js利用Canvas實現圖片壓縮功能

來源：懂視網責編：小采時間：2020-11-27 22:30:06

Js利用Canvas實現圖片壓縮功能

Js利用Canvas實現圖片壓縮功能:最近做的APP項目涉及到手機拍照上傳圖片，因為手機拍照的圖片通常都比較大，所以上傳的時候就會很慢。為此，需要對圖片進行壓縮處理來優化上傳功能。以下是具體實現： /* * 圖片壓縮 * img 原始圖片 * width 壓縮后的寬度 * height 壓縮后的高度 *

推薦度：

點擊下載本文 文檔為doc格式

導讀Js利用Canvas實現圖片壓縮功能:最近做的APP項目涉及到手機拍照上傳圖片，因為手機拍照的圖片通常都比較大，所以上傳的時候就會很慢。為此，需要對圖片進行壓縮處理來優化上傳功能。以下是具體實現： /* * 圖片壓縮 * img 原始圖片 * width 壓縮后的寬度 * height 壓縮后的高度 *

最近做的APP項目涉及到手機拍照上傳圖片，因為手機拍照的圖片通常都比較大，所以上傳的時候就會很慢。為此，需要對圖片進行壓縮處理來優化上傳功能。以下是具體實現：

/* 
 * 圖片壓縮
 * img 原始圖片
 * width 壓縮后的寬度
 * height 壓縮后的高度
 * ratio 壓縮比率 
 */
 function compress(img, width, height, ratio) { 
 var canvas, ctx, img64;
 
 canvas = document.createElement('canvas'); 
 canvas.width = width;
 canvas.height = height;
 
 ctx = canvas.getContext("2d"); 
 ctx.drawImage(img, 0, 0, width, height);
 
 img64 = canvas.toDataURL("image/jpeg", ratio);
 
 return img64;
 }

上面是一個圖片壓縮函數，返回 base64 格式的圖片數據。其中壓縮比率取值（0 - 1 之間）越大圖片質量越高。建議不要將圖片轉為 png 格式，因為轉為 png 格式，圖片的 base64 比轉為 jpeg 的要長不少。下面是實際調用：

var image = new Image();
image.src = "/img/test.jpg";
 
image.onload = function(){
 var img64 = compress(image, 500, 400, 0.7);
 document.getElementById("test").src = img64;
}

注意：壓縮方法的調用以及圖片src賦值必須放在圖片的 onload 方法里面。因為只有等圖片加載完成后才能進行壓縮處理，從而轉換為base64 進行賦值。如果放在 onload 方法外面，則可能壓縮代碼無效，或者會生成一張純黑色的圖片。

以上這篇Js利用Canvas實現圖片壓縮功能就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Js利用Canvas實現圖片壓縮功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：功能 js 壓縮

熱門焦點

Js利用Canvas實現圖片壓縮功能

Js利用Canvas實現圖片壓縮功能

Js利用Canvas實現圖片壓縮功能

最新推薦

猜你喜歡

熱門推薦