最近做的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實現圖片壓縮功能就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
