前端压缩图片

功能介绍

压缩图片

功能实现

示例代码：

export const CompressImage = (file) => {
      let files;
      const fileSize = parseFloat((parseInt(file['size']) / 1024 / 1024).toFixed(2))
      const read = new FileReader();
      read.readAsDataURL(file);
      return new Promise(function (resolve, reject) {
            read.onload = function (e) {
                  var img = new Image();
                  img.src = e.target.result;
                  img.onload = function () {
                        var w = this.width,
                              h = this.height
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        var base64;
                        canvas.setAttribute("width", w)
                        canvas.setAttribute("height", h)
                        ctx.drawImage(this, 0, 0, w, h)
                        // 针对原图片的大小来设置不同的压缩质量(1最高)
                        if (fileSize < 1) {
                              base64 = canvas.toDataURL(file['type'], 1)
                        } else if (fileSize > 1 && fileSize < 2) {
                              base64 = canvas.toDataURL(file['type'], 0.5)
                        } else {
                              base64 = canvas.toDataURL(file['type'], 0.2)
                        }
                        files = dataURLtoFile(base64, file['name']); //如果后台接收类型为base64的话这一步可以省
                        resolve(files)
                  }
            }
      })
}

export const dataURLtoFile = (dataurl, filename) => {
      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 File([u8arr], filename, { type: mime });
}