前端如何针对上传图片进行压缩处理

在前端开发中，尤其是公众号开发时，手机上传的拍照图片都是非常大，基本都是几兆以上，对于应用存储来说，非常这个图片功能就非常占用磁盘空间，而且在上传下载时，也占用太多的网络资源，

但遇到这种情况时，就需要进入图片等比率进行缩放，把图片压缩至KB级别。以下是前端压缩函数，基本带有注释，供大家参考

调用压缩函数

压缩函数

源码如下：

调用压缩函数

dealImage(this.result, { //压缩
 width: 1000 //设置宽为1000，高跟着宽进入缩放
 }, function (base) {//压缩返回的文件
 api.uploadImgBase64({//调用后台的图片上传接口
 'fileName':'img.jpg',//文件上传名
 'type':'img',//文件类型
 'base64':base//文件传输类型
}).then(res => {
......
}

压缩函数

dealImage(path, obj, callback) {//path图片路径，obj为对象，包含宽和高，callback回调参数
 var img = new Image();
 img.src = path;
 img.onload = function(){
 var that = this;
 // 默认按比例压缩
 var w = that.width,
 h = that.height,
 scale = w / h;
 w = obj.width || w;
 h = obj.height || (w / scale);
 var quality = 0.9; // 默认图片质量为0.5
 //生成canvas
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 // 创建属性节点
 var anw = document.createAttribute("width");
 anw.nodeValue = w;
 var anh = document.createAttribute("height");
 anh.nodeValue = h; 

 canvas.setAttributeNode(anw);
 canvas.setAttributeNode(anh);
 ctx.drawImage(that, 0, 0, w, h);
 // 图像质量
 if(obj.quality && obj.quality <= 1 && obj.quality > 0){
 quality = obj.quality;
 }
 // quality值越小，所绘制出的图像越模糊
 var base64 = canvas.toDataURL('image/jpeg', quality );
 // 回调函数返回base64的值
 callback(base64);
 }
}