通过canvas重新绘图实现去掉图片背景色

需求前端展示图与传输给后端的图不一致（前端展示透明图，传给后端白色背景图）

废话不多说直接上代码

  /**
     base64 // 图片base64编码，图片本身是白色背景
  **/
 removeImgBac(base64: string) {
    const rgba = [255, 255, 255, 255];
    const tolerance = 60;  // 容差率
    const canvas = document.createElement('canvas');
    const canvasText = canvas.getContext('2d');
    const img = new Image();
    img.src = base64;
    let imgData = null;
    let [r0, g0, b0, a0] = rgba;
    let r, g, b, a;
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      canvasText.drawImage(img, 0, 0);
      imgData = canvasText.getImageData(0, 0, 200, 700);
      for (let i = 0; i < imgData.data.length; i += 4) {
        r = imgData.data[i];
        g = imgData.data[i + 1];
        b = imgData.data[i + 2];
        a = imgData.data[i + 3];
        const t = Math.sqrt((r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2);
        if (t < tolerance) {
          imgData.data[i] = 0;
          imgData.data[i + 1] = 0;
          imgData.data[i + 2] = 0;
          imgData.data[i + 3] = 0;
        }
      }
      canvasText.putImageData(imgData, 0, 0);
      this.showImgUrl = canvas.toDataURL('png');
    }
  }

效果图

还不错吧