function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; //壓縮係數0-1之間 newImage.src = base64; newImage.setAttribute("crossOrigin", 'Anonymous'); //url爲外域時需要 var imgWidth, imgHeight; newImage.onload = function () { imgWidth = this.width; imgHeight = this.height; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); if (Math.max(imgWidth, imgHeight) > w) { if (imgWidth > imgHeight) { canvas.width = w; canvas.height = w * imgHeight / imgWidth; } else { canvas.height = w; canvas.width = w * imgWidth / imgHeight; } } else { canvas.width = imgWidth; canvas.height = imgHeight; quality = 0.6; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(this, 0, 0, canvas.width, canvas.height); var base64 = canvas.toDataURL("image/jpeg", quality); //壓縮語句 // 如想確保圖片壓縮到自己想要的尺寸,如要求在50-150kb之間,請加以下語句,quality初始值根據情況自定 // while (base64.length / 1024 > 150) { // quality -= 0.01; // base64 = canvas.toDataURL("image/jpeg", quality); // } // 防止最後一次壓縮低於最低尺寸,只要quality遞減合理,無需考慮 // while (base64.length / 1024 < 50) { // quality += 0.001; // base64 = canvas.toDataURL("image/jpeg", quality); // } callback(base64);//必須通過回調函數返回,否則無法及時拿到該值 } } function printing(base64) { console.log("壓縮後", base64.length / 1024) }
ie中 newImage.src 要放在 newImage.onload下面,不然不會執行
ie8中 canvas.getContext("2d") getContext方法不管用,需要引入excanvas.js