本文介绍的图片压缩方法适用前端开发的同学,
主要流程:图片转base64——canvas重绘——实现压缩。
一、图片转为base64
网上有现成的工具,我们把图片放进去,就会得到相应的base64编码,此编码的长度就是图片的大小,转换成KB要除以1024,如想预览base64图片,只需将img标签的src属性设置为该base64编码即可。
注意:用var oldSize = base64.length/1024来表示图片的大小,会比图片实际尺寸大1/4,即oldSize*3/4后才是图片的实际尺寸(略有误差)。
转base64工具网址为:http://imgbase64.duoshitong.com/ (如失效请自己查找,工具非常多)
二、canvas压缩
//压缩方法
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);//必须通过回调函数返回,否则无法及时拿到该值
}
}
//使用压缩
dealImage(oldBase64, 800, printing);
function printing(base64) {
console.log("压缩后", base64.length / 1024)
}
注意:压缩系数quality在0.995-1之间,压缩会出现异常,压缩后尺寸比原图还大,所以要避免取这些值。