前端图片上传的压缩(canvas)

压缩代码（利用canvas）

/**         * 图片压缩（利用canvas）     
            * @param  path     图片路径      
            * @param  obj      压缩配置width,height,quality，不传则按比例压缩      
            * @param  callback  回调函数     
 */      
        function dealImage(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);          
            //生成canvas          
            var canvas = document.createElement('canvas'),          
            ctx = canvas.getContext('2d');          
            canvas.width = w;          
            canvas.height = h;          
            ctx.drawImage(that, 0, 0, w, h);          
            // 默认图片质量为0.7         
            var quality = 0.7;          
            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {           
              quality = obj.quality; 
            }          
            // 回调函数返回base64的值          
            var base64 = canvas.toDataURL('image/jpeg', quality);          
            // console.log('base64==>',base64)          
            callback(base64);       
                }
          } 
    

以下函数对图片进行处理转base64

    function btnUploadFile(e){ 
      for(let i=0,j=e.target.files.length;i<j;i++){        
        var imgFile = e.target.files[i]; //获取图片文件        
        // console.log(imgFile)        
        if (imgFile.size >= 200 * 1024) {          
          // 图片大于200kb进行压缩          
          var reader = new FileReader();          
          reader.readAsDataURL(imgFile);         
          const that = this;        
          reader.onload = function (e) {        
            var img = new Image();        
            img.src = e.target.result; //获取base64          
            //如果图片大小小于200kb，则直接上传        
            dealImage(e.target.result,{},baseToFormDate)             
          }                
        } else{          
          var formData = new FormData();  // 创建form对象        
          formData.append('file', imgFile);  // 通过append向form对象添加数据        
          //uploadImg(formData) 上传        
           }      
       }

base64转图片formData

    function baseToFormDate(base64String){        
        //这里对base64串进行操作，去掉url头，并转换为byte      
        var bytes = window.atob(base64String.split(',')[1]);           
        //处理异常，将ASCII码小于0的转换为大于0，这里有两种写法   
        var ab = new ArrayBuffer(bytes.length);    
        var ia = new Uint8Array(ab);    
        for(var i = 0; i < bytes.length; i++){     
          ia[i] = bytes.charCodeAt(i);     
        }     
       //Blob对象     
       var blob = new Blob([ab], {type: 'image/jpeg'}); //type为图片的格式          
       //FormData对象      
       var fd = new FormData();    
       fd.append('file',blob, Date.now() + '.jpg');          
    }