vue压缩图片，js压缩图片质量，非压缩长宽

sfzfileListzm为图片file文件

核心

 // 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)
                    var file = item.file;
                    // console.log('key',key);
                    // console.log(file)
                    // 选择的文件是图片
                    if(file.type.indexOf("image") === 0) {
                      // 压缩图片需要的一些元素和对象
                      var reader = new FileReader(),
                        //创建一个img对象
                        img = new Image();
                      reader.readAsDataURL(file);
                      //文件base64化，以便获知图片原始尺寸
                      reader.onload = function(e) {
                        img.src = e.target.result;
                      };
                      // base64地址图片加载完毕后执行
                      img.onload = function () {
                        // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        // 图片原始尺寸
                        var originWidth = this.width;
                        var originHeight = this.height;
                        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
                        var maxWidth = 600,
                          maxHeight = 600;
                        // 目标尺寸
                        var targetWidth = originWidth,
                          targetHeight = originHeight;
                        // 图片尺寸超过300x300的限制
                        if(originWidth > maxWidth || originHeight > maxHeight) {
                          if(originWidth / originHeight > maxWidth / maxHeight) {
                            // 更宽，按照宽度限定尺寸
                            targetWidth = maxWidth;
                            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                          } else {
                            targetHeight = maxHeight;
                            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                          }
                        }
                        // canvas对图片进行缩放
                        canvas.width = targetWidth;
                        canvas.height = targetHeight;
                        // 清除画布
                        context.clearRect(0, 0, targetWidth, targetHeight);
                        // 图片压缩
                        context.drawImage(img, 0, 0, targetWidth, targetHeight);
                        /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
                        //压缩后的图片转base64 url
                        /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
                         * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
                        var ZMnewUrl = canvas.toDataURL('image/jpeg', 0.7);//base64 格式
                        _this.ZMBase64=ZMnewUrl;
                        resolve(//返回写函数里面你要执行的内容
                          console.log('_this.ZMBase64',_this.ZMBase64)
                        )
                      };

我的场景使用加了些判断

 /*压缩正面*/
        ZMFile(sfzfileListzm){
            var _this = this;
            return new Promise(function (resolve, reject) {
              /*判断是否有图片或者回显图*/
              if(sfzfileListzm.length>0){
                sfzfileListzm.forEach(function (item,key) {
                  /*判断是否为回显图，ISImage为undefined则为新上传图*/
                  if(item.isImage==undefined){
                    // 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)
                    var file = item.file;
                    // console.log('key',key);
                    // console.log(file)
                    // 选择的文件是图片
                    if(file.type.indexOf("image") === 0) {
                      // 压缩图片需要的一些元素和对象
                      var reader = new FileReader(),
                        //创建一个img对象
                        img = new Image();
                      reader.readAsDataURL(file);
                      //文件base64化，以便获知图片原始尺寸
                      reader.onload = function(e) {
                        img.src = e.target.result;
                      };
                      // base64地址图片加载完毕后执行
                      img.onload = function () {
                        // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        // 图片原始尺寸
                        var originWidth = this.width;
                        var originHeight = this.height;
                        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
                        var maxWidth = 600,
                          maxHeight = 600;
                        // 目标尺寸
                        var targetWidth = originWidth,
                          targetHeight = originHeight;
                        // 图片尺寸超过300x300的限制
                        if(originWidth > maxWidth || originHeight > maxHeight) {
                          if(originWidth / originHeight > maxWidth / maxHeight) {
                            // 更宽，按照宽度限定尺寸
                            targetWidth = maxWidth;
                            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                          } else {
                            targetHeight = maxHeight;
                            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                          }
                        }
                        // canvas对图片进行缩放
                        canvas.width = targetWidth;
                        canvas.height = targetHeight;
                        // 清除画布
                        context.clearRect(0, 0, targetWidth, targetHeight);
                        // 图片压缩
                        context.drawImage(img, 0, 0, targetWidth, targetHeight);
                        /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
                        //压缩后的图片转base64 url
                        /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
                         * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
                        var ZMnewUrl = canvas.toDataURL('image/jpeg', 0.7);//base64 格式
                        _this.ZMBase64=ZMnewUrl;
                        resolve(//返回写函数里面你要执行的内容
                          console.log('_this.ZMBase64',_this.ZMBase64)
                        )
                      };
                    } else {
                      alert('请上传图片格式');
                    }

                  }else{
                    resolve(//返回写函数里面你要执行的内容
                      console.log('item.url',item.url)
                    )
                  }
                });
              }else{
                resolve(//返回写函数里面你要执行的内容
                  console.log('sfzfileListzm',sfzfileListzm)
                )
              }
            })
        },