前端base64压缩(不兼容ie8)
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
一辈子说长不长,说短不短,努力做好两件事:第一件事爱生活,爱身边的人,爱自己;第二件事是好好学习,好好工作,实现自己的人生价值观,而不仅仅是为了赚钱