這次帶給大家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在行動端進行圖片上傳（附程式碼）
以上是Js+Canvas做出圖片壓縮的詳細內容。更多資訊請關注PHP中文網其他相關文章！
