H5实现图片先压缩再上传

现在一般手机拍的照片都有几M,图片太多不仅占用空间大，而且也会影响上传速度，故上传图片前进行压缩就很有必要了。

解决思路

  利用canvas进行图片压缩，canvas的toDataURL方法的第二个参数是图片质量，通过取不同的图片质量来达到压缩的效果。

解决步骤

1、获取到图片的base64格式。
2、等到图片加载完成后，将图片画到canvas上。
3、利用canvas的toDataURL方法来实现压缩。
4、将dataURL转换成Bolb对象。
5、将Bold对象转换成formData对象。
6、通过ajax发送给后台。

html 
<input type="file" id="file" /> 

图片压缩

（1）需要在图片加载完毕后才进行压缩

  mainEvent:function(){
        let that=this;  // 将vue的上下文this挂在that上，避免与reader.onload()方法的回调函数中的this冲突
        let  file=document.getElementById('file').files[0];
        let  reader=new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function () {
           let content=this.result; //图片的src，base64格式
           let img = new Image();
           img.src=content;
           img.onload=function (){ //图片加载完毕
              that.compressEvent(img,(dataURL)=> {
                 that.uploadImg(dataURL,file);
           })
          }
        };
      },

（2）把图片绘制到canvas上去

  compressEvent:function(img,callback){
     let that=this;
     let  canvas=document.getElementById('myCanvas');
     let  ctx=canvas.getContext('2d');
     let initSize=img.src.length;
     let width=img.width;
     let height=img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    let dataURL = canvas.toDataURL("image/jpeg", 0.1);
    callback?callback(dataURL):null; //调用回调函数
  }

图片上传

（3）dataURL转换为Bold对象或File对象

  File继承于Blob，扩展了一些属性（文件名、修改时间、路径等）。绝大多数场景下，使用Bolb对象就可以了。兼容性：Edge浏览器不支持File对象构造函数，也就是Edge里不能new File()。 这里以dataURL转Bold对象为例。

 dataURItoBlob(dataurl){   //dataurl是base64格式
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
      },

（4）将Bold对象转换成formData对象,并提交

uploadImg:function (dataURL,file){
   let blob=that.dataURItoBlob(dataURL);
   let  formData = new FormData();
   formData.append("file",blob,file.name);
   const instance=axios.create({ withCredentials: true})
   let config = { headers: { "Content-Type": "multipart/form-data" }};
   instance.post('/api/msgreply/UploadImg',that.formData,config).then(res => {
          //success
     }).catch(err => { 
        //fail
   });
}