如何快速去除PNG图片黑色背景？求简便实现方案

先明确：CSS滤镜无法真正生成透明图片 #

如果只是想在页面上视觉上隐藏黑色边角，可以用CSS混合模式或滤镜实现，但没法真正修改图片的透明通道，导出的图片仍会保留黑色。如果需要生成带透明背景的base64图片，CSS做不到，只能用Canvas，但可以优化原有方法提升效率。

场景1：仅页面展示（无需导出透明图片） #

用CSS混合模式让黑色边角和背景融合，比如你的图片主体为浅色，给容器加白色背景，再给图片设置mix-blend-mode: screen：

.image-container {
  background: #fff;
}
.image-container img {
  mix-blend-mode: screen;
}

原理：黑色与任何颜色通过screen混合都会变成该颜色，视觉上就看不到黑色边角了，但图片本身的像素并未改变。

场景2：需要生成带透明通道的base64图片（优化版Canvas方法） #

原有逐字节循环效率较低，改成用Uint32Array批量处理像素，循环次数直接减少为原来的1/4，性能提升明显：

优化代码（纯黑判断） #

const toDataURL = (src: string) => {   
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = () => {
    const canvas = document.createElement('CANVAS');
    const ctx = canvas.getContext('2d')!;      
    canvas.height = img.naturalHeight;
    canvas.width = img.naturalWidth;
    ctx.drawImage(img, 0, 0);

    // 转成32位整数数组，每个元素对应一个像素的RGBA值
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data32 = new Uint32Array(imgData.data.buffer);
    // 纯黑（RGB(0,0,0)，Alpha=255）的32位数值
    const pureBlack = 0xFF000000;

    // 循环判断每个像素
    for (let i = 0; i < data32.length; i++) {
      if (data32[i] === pureBlack) {
        data32[i] = 0x00000000; // 设为全透明
      }
    }

    ctx.putImageData(imgData, 0, 0);
    const dataURL = canvas.toDataURL('image/png');
    setTestUrl(dataURL);
  };
  img.src = src;
};

toDataURL(PNG_TEST);

进阶：处理非纯黑的深色边角 #

如果黑色边角不是绝对纯黑（存在细微色差），可以添加阈值判断，允许RGB值在一定范围内都算作黑色：

const toDataURL = (src: string) => {   
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = () => {
    const canvas = document.createElement('CANVAS');
    const ctx = canvas.getContext('2d')!;      
    canvas.height = img.naturalHeight;
    canvas.width = img.naturalWidth;
    ctx.drawImage(img, 0, 0);

    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data32 = new Uint32Array(imgData.data.buffer);
    const colorThreshold = 10; // 允许的色差范围，值越大包含的深色越多

    for (let i = 0; i < data32.length; i++) {
      const pixel = data32[i];
      // 拆解RGB和Alpha值
      const r = (pixel >> 16) & 0xFF;
      const g = (pixel >> 8) & 0xFF;
      const b = pixel & 0xFF;
      const a = (pixel >> 24) & 0xFF;

      // 判断是否为深色且完全不透明
      if (r <= colorThreshold && g <= colorThreshold && b <= colorThreshold && a === 255) {
        data32[i] = 0x00000000;
      }
    }

    ctx.putImageData(imgData, 0, 0);
    const dataURL = canvas.toDataURL('image/png');
    setTestUrl(dataURL);
  };
  img.src = src;
};

toDataURL(PNG_TEST);

大图片优化：用OffscreenCanvas后台处理 #

如果图片尺寸较大，用OffscreenCanvas可以在Worker线程处理，避免阻塞页面主线程：

const toDataURL = async (src: string) => {
  // 用fetch获取图片，避免跨域问题
  const response = await fetch(src);
  const blob = await response.blob();
  const imgBitmap = await createImageBitmap(blob);
  
  // 创建离屏Canvas
  const canvas = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(imgBitmap, 0, 0);

  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data32 = new Uint32Array(imgData.data.buffer);
  const colorThreshold = 10;

  for (let i = 0; i < data32.length; i++) {
    const pixel = data32[i];
    const r = (pixel >> 16) & 0xFF;
    const g = (pixel >> 8) & 0xFF;
    const b = pixel & 0xFF;
    const a = (pixel >> 24) & 0xFF;

    if (r <= colorThreshold && g <= colorThreshold && b <= colorThreshold && a === 255) {
      data32[i] = 0x00000000;
    }
  }

  ctx.putImageData(imgData, 0, 0);
  // 转成Blob再生成base64
  const blobResult = await canvas.convertToBlob({ type: 'image/png' });
  const dataURL = await new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.readAsDataURL(blobResult);
  });

  setTestUrl(dataURL as string);
};

toDataURL(PNG_TEST);

内容的提问来源于stack exchange，提问作者KHTRE