使用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