Js+Canvas做出圖片壓縮

這次帶給大家Js Canvas做出圖片壓縮，Js Canvas做出圖片壓縮的注意事項有哪些，下面就是實戰案例，一起來看一下。

/* 
 * 图片压缩
 * 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");            
   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 方法外面，則可能壓縮程式碼無效，或者會產生一張純黑色的圖片。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

angularJS Ionic在行動端進行圖片上傳（附程式碼）

Particles.js實作粒子動態背景動畫

#

以上是Js+Canvas做出圖片壓縮的詳細內容。更多資訊請關注PHP中文網其他相關文章！