html img图片等比例缩放_前端如何针对上传图片进行压缩处理

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

但遇到这种情况时，就需要进入图片等比率进行缩放，把图片压缩至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); }}