js Canvas压缩图片文件

// 上传图片
function chooseImg() {
  let dom = document.createElement('input');
  dom.style.display = 'none';
  dom.type = 'file';
  dom.setAttribute('multiple', '');
  dom.setAttribute('accept', 'png');
  document.body.append(dom);
  dom.click();
  return new Promise((reslove, reject) => {
    dom.onchange = function(e) {
      dom.remove();
      reslove(e);
    };
  });
}

function fileOrBlobToDataURL(obj) {
  var a = new FileReader();
  return new Promise((resolve, reject) => {
    a.readAsDataURL(obj);
    a.onload = function(e) {
      resolve(e.target.result);
    };
  });
}

// DataURL转Blob对象
function dataURLToBlob(dataurl) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

async function compressPicture(file) {
  let canvasDom = document.createElement('canvas');
  let imgDom = document.createElement('img');
  let fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2);
  console.log(fileSize);
  let src = await fileOrBlobToDataURL(file);
  imgDom.setAttribute('src', src);
  return new Promise((resolve, reject) => {
    imgDom.onload = function(e) {
      let { width, height } = imgDom;

      var w = width,
        h = height;
      //生成canvas
      var canvas = canvasDom;
      var ctx = canvas.getContext('2d');
      var base64;
      // 创建属性节点
      canvas.setAttribute('width', w);
      canvas.setAttribute('height', h);
      ctx.drawImage(this, 0, 0, w, h);

      if (fileSize < 1) {
        //如果图片小于一兆 那么不执行压缩操作
        base64 = canvas.toDataURL(file['type'], 1);
      } else if (fileSize > 1 && fileSize < 2) {
        //如果图片大于1M并且小于2M 那么压缩0.5
        base64 = canvas.toDataURL(file['type'], 0.5);
      } else {
        //如果图片超过2m 那么压缩0.2
        base64 = canvas.toDataURL(file['type'], 0.2);
      }
      resolve(base64);
    };
  });
}
// 压缩上传图片
export async function uploadImage() {
  let fileTarget = await chooseImg();
  let fileArr = Array.from(fileTarget.target.files);
  let compressedPictureAll = fileArr.map(ele => {
    return compressPicture(ele);
  });
  let base64Arr = await Promise.all(compressedPictureAll);
  let blobAll = base64Arr.map(ele => {
    return dataURLToBlob(ele);
  });
  return blobAll;
}