选择前端压缩的原因

减轻服务端压力，减少流量。

• 直接上代码，这里封装了一个函数compressImg，传3个参数
• path图片的文档流base64
• obj传入的一些参数：quality压缩的质量
• callback回掉函数

compressImg(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.7;  // 默认图片质量为0.7
                //生成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);
                // drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，w，h是将图片按给定的像素进行缩小。
        如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。
                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);
            }
        },

html文件

<input id="backImgInput" type="file" accept="image/*" onChange="changeImgID()" />

js调用

changeImgID() {
     //获取读取我文件的File对象
     var selectedFile = document.getElementById('backImgInput').files[0];
     var reader = new FileReader();
     reader.readAsDataURL(selectedFile);
     reader.onload = function () {
         //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
         console.log(this)
         //图片压缩
         compressImg(this.result,{
            quality: 0.01
        },function (base64Codes) {
           console.log(base64Codes)
           //base64Codes即图片压缩完成后拿到的base64文档流
        })
     }
}