如何使用JavaScript实现像素连通域标记，提取PNG白色像素块坐标？

你需要的功能可以通过连通域标记算法实现，结合你已有的黑色背景透明化逻辑，以下是具体实现方案：

原生JavaScript实现 #

推荐用BFS种子填充法实现，逻辑简单易维护，前端普通场景性能足够：

完整代码 #

// 连通域标记函数，返回格式为[xMin, yMax, xMax, yMin]的像素块边界数组
// connectType可选4/8，4连通仅上下左右算相邻，8连通包含对角线
const getConnectedComponents = (img: HTMLImageElement, connectType: 4 | 8 = 4) => {
  const c = document.createElement("canvas");
  const w = img.width;
  const h = img.height;
  c.width = w;
  c.height = h;
  const ctx = c.getContext("2d");
  if (!ctx) return [];

  // 调用你已实现的黑色背景转透明逻辑
  ctx.drawImage(img, 0, 0, w, h);
  const imageData = ctx.getImageData(0, 0, w, h);
  const pixel = imageData.data;
  for (let p = 0; p < pixel.length; p += 4) {
    if (pixel[p] === 0 && pixel[p + 1] === 0 && pixel[p + 2] === 0) {
      pixel[p + 3] = 0;
    }
  }

  // 访问标记矩阵
  const visited = new Array(h).fill(0).map(() => new Array(w).fill(false));
  const resultBlocks = [];
  // 相邻像素偏移量
  const dirs = connectType === 4 
    ? [[-1,0],[1,0],[0,-1],[0,1]] 
    : [[-1,0],[1,0],[0,-1],[0,1],[-1,-1],[-1,1],[1,-1],[1,1]];

  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      const pixelIdx = (y * w + x) * 4;
      // 仅处理未访问的非透明像素
      if (pixel[pixelIdx + 3] > 0 && !visited[y][x]) {
        const queue = [[x, y]];
        visited[y][x] = true;
        // 初始化当前连通域边界
        let xMin = x, xMax = x, yMin = y, yMax = y;

        while (queue.length) {
          const [curX, curY] = queue.shift()!;
          // 更新边界值
          xMin = Math.min(xMin, curX);
          xMax = Math.max(xMax, curX);
          yMin = Math.min(yMin, curY);
          yMax = Math.max(yMax, curY);

          // 遍历相邻像素
          for (const [dx, dy] of dirs) {
            const nextX = curX + dx;
            const nextY = curY + dy;
            // 校验边界+未访问+非透明
            if (nextX >= 0 && nextX < w && nextY >= 0 && nextY < h && !visited[nextY][nextX]) {
              const nextPixelIdx = (nextY * w + nextX) * 4;
              if (pixel[nextPixelIdx + 3] > 0) {
                visited[nextY][nextX] = true;
                queue.push([nextX, nextY]);
              }
            }
          }
        }
        // 可加过滤逻辑，比如剔除像素数小于10的噪点块
        // if ((xMax - xMin) * (yMax - yMin) > 10) 
        resultBlocks.push([xMin, yMax, xMax, yMin]);
      }
    }
  }
  return resultBlocks;
}

使用示例 #

const img = new Image();
img.crossOrigin = "anonymous"; // 跨域图片需要配置
img.src = "你的图片资源地址";
img.onload = () => {
  const shapeBlocks = getConnectedComponents(img, 4);
  console.log(shapeBlocks); // 输出符合你要求格式的坐标数组
}

现成实现库 #

如果不想自己维护算法逻辑，可以用成熟的图像处理库直接调用API：

• image-js：内置connectedComponents方法，支持配置连通性、最小像素阈值，适合轻量场景
• opencv.js：OpenCV的JS版本，直接调用cv.connectedComponents或cv.findContours即可得到结果，适合复杂图像处理需求

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