如何将canvas转换为带透明背景的图片？处理出现红黑棋盘格怎么解决

架构老林

2026-9-27

问题原因

像素数据的存储规则是每4个元素对应一个像素，依次为红（R）、绿（G）、蓝（B）、透明度（A），当前像素的透明度通道索引应为i + 3，你代码中误用了i + 4，实际修改的是下一个像素的红色通道值，因此出现异常的红黑棋盘格效果。
同时你的处理逻辑写反了：要把黑色背景设为透明，应该把Alpha值设为0而非255，255代表完全不透明，0才代表完全透明。

修正后代码

function removeBlack(img) {
  // 创建canvas并绘制原图
  let tmpCanvas = document.createElement('canvas');
  tmpCanvas.width = img.width;
  tmpCanvas.height = img.height;
  let tmpCtx = tmpCanvas.getContext('2d');
  tmpCtx.drawImage(img, 0, 0, tmpCanvas.width, tmpCanvas.height);

  // 获取图像数据，将黑色像素设为透明
  let imgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
  let data = imgData.data;
  // 可选阈值设置，适配非纯黑的背景杂色，可根据实际需求调整
  const threshold = 5;
  for (var i = 0; i < data.length; i += 4) {
    let r = data[i],
        g = data[i+1],
        b = data[i+2];
    
    if (r <= threshold && g <= threshold && b <= threshold) {
      // 透明度设为0，完全透明
      data[i + 3] = 0;
    }
  }

  tmpCtx.putImageData(imgData, 0, 0);
  const pngUrl = tmpCanvas.toDataURL("image/png");
  
  let image = document.createElement('img');
  image.src = pngUrl;
  img.remove();
  tmpCanvas.remove();
  return image;
}