压缩图片代码量有点大,先奉上封装代码再慢慢解释。
这里通过等比缩小图片的长宽以达到减小图片大小的目的。
//控制是否继续压缩,考虑到压缩后的图片避免再压缩
var flag = false;
let suofang = function(base64, bili, callback) {//传入图片的base64、压缩比例、回调
//处理缩放,转格式
let _img = new Image();//新建一个image对象
_img.src = base64;//image对象里塞入传入的图片base64
_img.onload = function() {//img预启动后执行
let _canvas = document.createElement("canvas");//压缩图片操作基于canvas
var w1 = this.width;//宽度高度赋值
var h1 = this.height;
_canvas.setAttribute("width", w1);
_canvas.setAttribute("height", h1);
_canvas.getContext("2d").drawImage(this, 0, 0, w1, h1);
let base64_1 = _canvas.toDataURL("image/jpeg");
_canvas.toBlob(function(blob) {//将canvas对象转换成blob查看信息
if (blob.size <= 1024 * 1024 * 2) {//如果在一定的大小内 则返回原大小的blob,并且不让脚本继续向下执行
callback(blob, base64_1);
flag = true;
}
}, "image/jpeg");
if (flag == true) {
flag = false;
return;
}
// 此处往下是图片大小超出指定大小,开始缩小图片
var w = this.width / bili;
var h = this.height / bili;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
var base64 = _canvas.toDataURL("image/jpeg");
_canvas.toBlob(function(blob) {//将canvas对象转换成blob查看信息
if (blob.size > 1024 * 1024 * 2) {//如果还是超过指定大小则递归
suofang(base64, bili, callback);
} else {
callback(blob, base64);//如果不超过指定大小则回调blob以及base64
}
}, "image/jpeg");
};
};
这里只是把工作中学习到的代码在这里做下记录,因为当时该逻辑没有花太多心思,存在很多可以做简化操作的地方,还望大家见谅。亲测有效。后期有机会,我会保留该文并在后面继续更新我这里的改动。
如果有更漂亮的写法欢迎来讨论,让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注,您的赞与关注将是我源源不断的前进动力。