如何用JavaScript移除HTML Canvas上的紫色杂点且不影响主体图像

一、精准移除孤立紫色杂点 #

针对Canvas中出现的细小紫色孤立杂点，可通过邻域像素占比判断实现无损伤清理：

1. 获取Canvas图像数据：

const canvas = document.getElementById('your-canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const width = imageData.width;
const height = imageData.height;

2. 定义紫色像素判定规则（可根据实际颜色微调RGB阈值）：

function isPurple(r, g, b) {
  return r > 120 && g < 100 && b > 120;
}

3. 遍历像素，清理孤立杂点：

// 跳过边缘像素，避免邻域越界
for (let y = 1; y < height - 1; y++) {
  for (let x = 1; x < width - 1; x++) {
    const idx = (y * width + x) * 4;
    const r = data[idx];
    const g = data[idx + 1];
    const b = data[idx + 2];
    
    if (isPurple(r, g, b)) {
      // 统计3x3邻域内非紫色像素数量
      let nonPurpleCount = 0;
      for (let dy = -1; dy <= 1; dy++) {
        for (let dx = -1; dx <= 1; dx++) {
          const nIdx = ((y + dy) * width + (x + dx)) * 4;
          const nr = data[nIdx];
          const ng = data[nIdx + 1];
          const nb = data[nIdx + 2];
          if (!isPurple(nr, ng, nb)) nonPurpleCount++;
        }
      }
      // 若邻域内绝大多数是非紫色（比如≥8个），判定为孤立杂点，替换为背景色（这里用白色）
      if (nonPurpleCount >= 8) {
        data[idx] = 255;
        data[idx + 1] = 255;
        data[idx + 2] = 255;
        data[idx + 3] = 255;
      }
    }
  }
}
// 写回处理后的图像
ctx.putImageData(imageData, 0, 0);

二、填补孔洞并让绿色区域“变粗” #

通过形态学膨胀操作实现绿色区域扩张，同时填补内部孔洞：

1. 重新获取图像数据（或基于上一步的结果），创建新数据存储膨胀后的结果：

const newData = new Uint8ClampedArray(data.length);
// 定义绿色像素判定规则
function isGreen(r, g, b) {
  return r < 50 && g > 150 && b < 50;
}

2. 执行3x3卷积膨胀：

for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const idx = (y * width + x) * 4;
    let hasGreen = false;
    // 检查3x3邻域内是否存在绿色像素
    for (let dy = -1; dy <= 1; dy++) {
      for (let dx = -1; dx <= 1; dx++) {
        const ny = y + dy;
        const nx = x + dx;
        if (ny >= 0 && ny < height && nx >= 0 && nx < width) {
          const nIdx = (ny * width + nx) * 4;
          if (isGreen(data[nIdx], data[nIdx+1], data[nIdx+2])) {
            hasGreen = true;
            break;
          }
        }
      }
      if (hasGreen) break;
    }
    // 若邻域有绿色，当前像素设为绿色；否则保留原像素
    if (hasGreen) {
      newData[idx] = 0;
      newData[idx+1] = 255;
      newData[idx+2] = 0;
      newData[idx+3] = 255;
    } else {
      newData[idx] = data[idx];
      newData[idx+1] = data[idx+1];
      newData[idx+2] = data[idx+2];
      newData[idx+3] = data[idx+3];
    }
  }
}
// 更新图像数据
imageData.data.set(newData);
ctx.putImageData(imageData, 0, 0);

三、移除紫色区域及周边绿色 #

先定位所有紫色区域，再清除其周边3x3范围内的绿色：

1. 标记需要清除的区域：

const toClear = new Array(width * height).fill(false);
// 第一步：标记所有紫色像素
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const idx = (y * width + x) * 4;
    if (isPurple(data[idx], data[idx+1], data[idx+2])) {
      toClear[y * width + x] = true;
    }
  }
}
// 第二步：标记紫色像素3x3邻域内的绿色像素
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    if (toClear[y * width + x]) {
      for (let dy = -1; dy <= 1; dy++) {
        for (let dx = -1; dx <= 1; dx++) {
          const ny = y + dy;
          const nx = x + dx;
          if (ny >= 0 && ny < height && nx >= 0 && nx < width) {
            const idx = (ny * width + nx) * 4;
            if (isGreen(data[idx], data[idx+1], data[idx+2])) {
              toClear[ny * width + nx] = true;
            }
          }
        }
      }
    }
  }
}

2. 清除标记区域：

for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    if (toClear[y * width + x]) {
      const idx = (y * width + x) * 4;
      // 替换为背景色（白色）
      data[idx] = 255;
      data[idx+1] = 255;
      data[idx+2] = 255;
      data[idx+3] = 255;
    }
  }
}
ctx.putImageData(imageData, 0, 0);

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