纯前端实现图片压缩功能，兼容ios、 android

往往我们上传图片 都需要手动 或者其他方式先压缩一遍 再来上传，我们能不借助外力纯前端高质量图片压缩吗？

我们先看下原图效果 1.26M

压缩后 65.63k

上代码

<div class="picture">  
  <input type="file" accept="image/*" multiple@change="beforeUpload($event)"/> 相册
</div>

我们这里做的是多张图上传的功能 files input获得的值 限制9张 ios android 通用噢、

async handle(files){
  const fileList = [];    
  for(let i = 0; i < files.length; i++){      
     if(i<9){           
       let item=files[i];         
       const base64Img = await this.getBase64(item);      
       const compressImg = await this.compress(base64Img);   
       fileList.push({               
          file: item.name,              
          size: this.size(compressImg.length),        
          img: compressImg, loading: true         
       })       
     }else{         
       alert('一次最多发送9张图片哦!');        
      break;       
     }  
   }    
  return fileList
}

获得base64编码 用promise 异步实现

getBase64(file){   
  return new Promise((resolve, reject) =>{     
     if(!/\/(?:jpeg|jpg|png)/i.test(file.type)){     
       alert（'不支持该图片类型!');         
       return reject();       
      }       
    let reader = new FileReader();    
    reader.onload = function(){        
      return resolve(this.result)      
    };      
    reader.readAsDataURL(file);   
  })
}

采用canvas 压缩 压缩到质量0.1倍, 当然你也可以循环压缩 压到更小

compress(result){  
  return new Promise((resolve, reject) =>{     
    var image = new Image();      
    image.src = result;      
    image.onload = function(){           
      var canvas = document.createElement("canvas"); //创建canvas元素      
      var context = canvas.getContext('2d');         
      canvas.width = image.width;          
      canvas.height = image.height;          
      context.drawImage(image, 0, 0, this.width, this.height); // 图片压缩     
        //将原来图片的质量压缩到原先的0.1倍。      
      var dataURL = canvas.toDataURL('image/jpeg', 0.1);       
      return resolve(dataURL)       
     }  
  })
}

图片单位大小算法

size(v){ 
    var unit = ["Byte", "KB", "M", "G", "T", "P", "E", "Z", "Y"];  
   var index = 0; 
    while(v >= 1000){       
      v = v / 1000;     
      index++;  
    }   
    return v.toFixed(2) + unit[index];
}