基于JavaScript提取白色背景图像中复杂物体的像素边界

Hey there! Let's fix this problem for you. The issue with your current approach is likely that it relies on shape-specific logic (like handling concave corners) which breaks down for convex or complex shapes. Instead, we need a robust, shape-agnostic method that can correctly identify the entire foreground object (including its solid interior) while ignoring any internal holes.

Here's a step-by-step solution using flood fill and connected components analysis:

The key idea is to:

• First distinguish between the external white background (connected to the image edges) and internal white holes (surrounded by the foreground object).
• Then collect all non-white pixels that belong to the foreground object, automatically excluding the internal holes (since those are white and marked separately).

This works for any shape—convex, concave, or with multiple holes—because it doesn't depend on the shape's geometry, just pixel connectivity.

We'll use HTML5 Canvas to handle image pixel data, since it's the most common way to process images in JS.

Step 1: Setup Canvas and Get Pixel Data #

First, load your image into a canvas to access its pixel data:

function loadImageAndProcess(imgSrc) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.crossOrigin = 'anonymous'; // Uncomment if loading from an external domain
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, img.width, img.height);
    const pixels = imageData.data;
    const width = img.width;
    const height = img.height;

    // Run our processing logic
    const objectPixels = extractObjectPixels(pixels, width, height);
    console.log('Object pixel coordinates:', objectPixels);
  };
  img.src = imgSrc;
}

Step 2: Helper Functions #

We'll need utilities to check for white pixels and perform flood fill:

// Check if a pixel is white (with tolerance for anti-aliasing)
function isWhite(pixels, x, y, width) {
  const index = (y * width + x) * 4;
  const r = pixels[index];
  const g = pixels[index + 1];
  const b = pixels[index + 2];
  // Adjust tolerance as needed—240 works for most clean white backgrounds
  return r > 240 && g > 240 && b > 240;
}

// Flood fill to mark external background pixels
function floodFill(pixels, width, height, x, y, visited) {
  const queue = [[x, y]];
  visited[y][x] = true;

  while (queue.length > 0) {
    const [cx, cy] = queue.shift();
    // Check 4-connected neighbors (up, down, left, right)
    const neighbors = [[cx-1, cy], [cx+1, cy], [cx, cy-1], [cx, cy+1]];
    for (const [nx, ny] of neighbors) {
      if (nx >= 0 && nx < width && ny >=0 && ny < height) {
        if (!visited[ny][nx] && isWhite(pixels, nx, ny, width)) {
          visited[ny][nx] = true;
          queue.push([nx, ny]);
        }
      }
    }
  }
}

Step 3: Extract Object Pixels (Excluding Holes) #

This function marks external background, then collects all valid foreground pixels:

function extractObjectPixels(pixels, width, height) {
  // 2D array to track which pixels have been visited by flood fill
  const visited = Array(height).fill().map(() => Array(width).fill(false));

  // Flood fill from all four edges to mark external background
  // Top edge
  for (let x = 0; x < width; x++) {
    if (!visited[0][x] && isWhite(pixels, x, 0, width)) {
      floodFill(pixels, width, height, x, 0, visited);
    }
  }
  // Bottom edge
  for (let x = 0; x < width; x++) {
    if (!visited[height-1][x] && isWhite(pixels, x, height-1, width)) {
      floodFill(pixels, width, height, x, height-1, visited);
    }
  }
  // Left edge
  for (let y = 0; y < height; y++) {
    if (!visited[y][0] && isWhite(pixels, 0, y, width)) {
      floodFill(pixels, width, height, 0, y, visited);
    }
  }
  // Right edge
  for (let y = 0; y < height; y++) {
    if (!visited[y][width-1] && isWhite(pixels, width-1, y, width)) {
      floodFill(pixels, width, height, width-1, y, visited);
    }
  }

  // Collect all non-white pixels that aren't part of the external background
  const objectPixels = [];
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      if (!isWhite(pixels, x, y, width) && !visited[y][x]) {
        objectPixels.push({x, y});
        // Optional: Uncomment to color the object red for visualization
        // const index = (y * width + x) * 4;
        // pixels[index] = 255;
        // pixels[index+1] = 0;
        // pixels[index+2] = 0;
      }
    }
  }

  // Optional: Uncomment to display the processed image
  // const resultCanvas = document.createElement('canvas');
  // resultCanvas.width = width;
  // resultCanvas.height = height;
  // resultCanvas.getContext('2d').putImageData(new ImageData(pixels, width, height), 0, 0);
  // document.body.appendChild(resultCanvas);

  return objectPixels;
}

• Shape-agnostic: The flood fill doesn't care about the shape's geometry—it only follows pixel connectivity, so convex, concave, or irregular shapes are handled equally well.
• Hole exclusion: By only marking the external background, any white pixels surrounded by the foreground (holes) remain unvisited. Since we only collect non-white pixels, these holes are automatically excluded.
• Flexible connectivity: You can switch to 8-connectivity (include diagonal neighbors) by adding [cx-1, cy-1], [cx+1, cy-1], [cx-1, cy+1], [cx+1, cy+1] to the neighbors list if needed.

• For large images, use a Uint8Array instead of a 2D array for visited to improve performance.
• Adjust the white tolerance in isWhite() if your image has anti-aliased edges or off-white backgrounds.
• To handle multiple separate foreground objects, modify the code to mark each connected foreground component with a unique ID using a connected components algorithm.

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