前端图片转成base64并压缩的实现方案

项目中会有很多地方用到把图片转成base64使用的地方，转换方法也有很多种，参考下文。。。。。

FileReader对象

在文件上传时可以new FileReader创建一个文件对象，然后用readAsDataURL方法可以获得一个base64字符串。
代码如下：

 function uploadImg(file) {
     let res = event.target.files[0]
     let reader = new FileReader()
     reader.readAsDataURL(res)
     reader.onload = function() {
        let base64Str = reader.result // base64字符串
     }
   }

canvas转换base64并压缩

canvas方法原理:
通过drawImage绘图api把图片绘制出来，然后用canvas的toDataURL方法可以把图片转换成base64

如果需要获取压缩后得base64,可以在绘图时控制图片的宽高比例来实现压缩效果。

封装代码如下：

export const changeImageBase64 = function(url,callback) {
  let img = new Image()
  // img.crossOrigin = '*'
  img.onload = function() {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
      // 图片原始尺寸
      var originWidth = this.width;
      var originHeight = this.height;
      // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
      var maxWidth = 500;
      var maxHeight = 400;
      // 目标尺寸
      var targetWidth = originWidth,targetHeight = originHeight;
      // 图片尺寸超过最大值的限制
      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);
      // 图片压缩
      /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
      context.drawImage(img, 0, 0, targetWidth, targetHeight);
    //压缩后的图片转base64 url
      var base64Url = canvas.toDataURL('image/jpeg', 0.92)
      callback(base64Url)
      canvas = null
  }
  img.onError = function() {
    alert('图片加载失败')
  }
  img.src = url
}

函数的url参数为图片的地址，callback是回调函数，如果是网络图片需要配置img.crossOrigin = '*'来解决跨域问题，通过canvas压缩过的base64图片效果很明显，可以把100多k大小的图片压缩到十几k。。。