前端有时候会遇到图片太大,预览过慢和无法传给后台的困境,另外还浪费流量。
在这里给大家推荐一款配合jQuery运行的插件:lrz.bundle.js;
这个插件的利用非常简单:传入图片信息,和需要压缩的尺寸(选填)就可以了
$("input[name="file"]").off().on("change",function(){
var _this = this;
var freader = new FileReader();
if (_this.files[0].size /1024>2 * 1024){
//在图片大于2M的情况下压缩
lrz(_this.files[0],{width:2014}).then(function(rst){
$.ajax({
url:'',
type:'',
data:{
base64: rst.base64.split(',')[1],
其他需要的数据....
}
dataType:'',
async: ,
success:function(data){
传给后台后,前端需做的处理....
}
})
}).catch(function (err) {
// 处理失败会执行
alert("图片压缩失败,请重新上传")
}).always(function () {
// 不管是成功失败,都会执行
});
}
})
但网上有的lrz.bundle.js可能是提取出来的一部分,兼容性不太好,我第一次下了一个结果不兼容安卓只有iOS可以用,后来下了全的lrz.all.bundle.js就可以了, 简书里不能放文件,如果有需要,联系我