canvas压缩多张图片（一）

随着技术的不断更新，前端压缩图片的需求也越来越多，但是一直没有一个好的方案。这里我结合canvas对图片进行了压缩，前端的同学可以借鉴一下
canvas压缩多张图片（二）
canvas压缩多张图片（三）

//保存文件到文件服务器（支持批量）
    async  uploadAvatarRegFn (htmlBox,all){
      var imgReg = /<img.*?(?:>|\/>)/gi;
      var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
      let urlReg = new RegExp(/(http|https):\/\/([\w.]+\/?)\S*/);
      var arr = htmlBox.match(imgReg);
      //没有图片
      if(!arr){
        return []
      }

      var imgArr  = [],Num = all ? 300 : 40,len = all ? arr.length : 3;

      for (var i = 0; i < arr.length ; i++) {
        if(imgArr.length<len){
          var src = arr[i].match(srcReg);
          if(!urlReg.test(src[1])){
            let imgUrl = src[1];
            let type = src[1].split(';base64,')[0].split('data:image/')[1];
            if(type =='webp'){
              type = 'jpeg'
            }

            if(this.getImgSize(src[1]) >=Num  && type !='gif'){
              imgUrl = await this.convertImgToBase64({url:src[1],num:0.9,type},Num);
            } 

            //获取图片地址
            imgArr.push({
              base64: imgUrl
            });
          } else {
            imgArr.push({
              base64: ''
            });
          }
        }
      }

      if(all){
        let  str=htmlBox,async=false;
        for(let i=0;i<arr.length ;i++){
          if(urlReg.test(arr[i].match(srcReg)[1])){
            async =true;
            str = str.replace(arr[i],imgArr[i].base64);
          } else {
            str = str.replace(arr[i].match(srcReg)[1],imgArr[i].base64);
          }
          
        }
        return {str,async}
      } else{
        return imgArr
      }
      
    },
     //canvas  压缩
    async convertImgToBase64 (obj,Num) { 
      return new Promise( (resolve)=>{
        var canvas = document.createElement('CANVAS'); 
        var ctx = canvas.getContext('2d'); 
        var img = new Image; 
        img.crossOrigin = 'Anonymous'; 
        img.src = obj.url; 
        img.onload = async()=>{
          var width = img.width;
          var height = img.height;
          // 按比例压缩4倍
          canvas.width = width*obj.num; 
          canvas.height = height*obj.num; 
          ctx.drawImage(img,0,0,width,height,0,0,width*obj.num,height*obj.num); 
          var dataURL = canvas.toDataURL('image/'+obj.type,obj.num);
          // let num = parseFloat(obj.num-0.1);
          let num = obj.num;
          if(this.getImgSize(dataURL) >=Num && num>0){
            canvas = null;
            this.convertImgToBase64({url:dataURL,num ,type:obj.type},Num).then((res)=>{
              resolve(res)
            })
          } else{
            resolve(dataURL)
            canvas = null;
          }
        };
      })
    },
    getImgSize (base64url){
      //获取base64图片大小，返回KB数字
      var strLength =base64url.length;
      var fileLength = parseInt(strLength - (strLength / 8) * 2);
      // 由字节转换为KB
      var size = "";
      size = (fileLength / 1024).toFixed(2);
      return parseInt(size) *2;
    }