使用antd进行头像压缩

重要的事情说三遍canvas只支持jpg图片压缩，canvas只支持jpg图片压缩，canvas只支持jpg图片压缩
手机照的图片基本都是jpg

export function compressImg(file, image, quality) {
  return new Promise(resolve => {
    // 图片压缩
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const originWidth = image.width;
    const originHeight = image.height;

    canvas.width = originWidth;
    canvas.height = originHeight;

    context.clearRect(0, 0, originWidth, originHeight);
    context.drawImage(image, 0, 0, originWidth, originHeight);

    canvas.toBlob((blob) => {
      const imgFile = new File([blob], file.name, { type: file.type }); // 将blob对象转化为图片文件
      resolve(imgFile);
    }, file.type, quality); // file压缩的图片类型
  })
}

或者可以使用大神的插件，完美的解决，因为上面的这个quality不好控制，这个quality不是按比例控制的，下面是大神的帖子地址

https://juejin.im/post/5c1b4eac6fb9a049d441c520