Image Border Detection And Size Enhancer

/**
 * Detects the border in an image and enhances its size by drawing a thicker border over it.
 * It works by first finding the most common color along the image's perimeter, assuming this is the border color.
 * Then, it uses a flood-fill algorithm starting from the perimeter to identify all pixels belonging to the border.
 * Finally, it draws a square for each detected border pixel to create a new, thicker border.
 *
 * @param {Image} originalImg The original Image object.
 * @param {string} borderColor The color of the new, enhanced border (e.g., 'black', '#FF0000').
 * @param {number} borderThickness The desired thickness of the new border in pixels.
 * @param {number} tolerance A value from 0 to 255 representing the color difference tolerance when matching border pixels. Higher values can help detect borders in noisy images (like JPEGs).
 * @returns {HTMLCanvasElement} A canvas element with the new, enhanced border drawn over the original image.
 */
async function processImage(originalImg, borderColor = 'black', borderThickness = 5, tolerance = 30) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas to access its pixel data
    ctx.drawImage(originalImg, 0, 0);
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Helper to get RGBA values at a specific coordinate
    const getPixel = (x, y) => {
        const index = (y * width + x) * 4;
        return [data[index], data[index + 1], data[index + 2], data[index + 3]];
    };

    // Helper to calculate the visual distance between two colors
    const colorDistance = (c1, c2) => {
        return Math.sqrt(
            Math.pow(c1[0] - c2[0], 2) +
            Math.pow(c1[1] - c2[1], 2) +
            Math.pow(c1[2] - c2[2], 2)
        );
    };

    // 1. Find the most common color on the image's perimeter.
    // This is a robust way to determine the border color.
    const colorCounts = {};
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            if (y === 0 || y === height - 1 || x === 0 || x === width - 1) {
                const pixel = getPixel(x, y);
                const colorKey = `${pixel[0]},${pixel[1]},${pixel[2]}`;
                colorCounts[colorKey] = (colorCounts[colorKey] || 0) + 1;
            }
        }
    }

    if (Object.keys(colorCounts).length === 0) {
        // Handle cases for 1x1 images or no perimeter
        return canvas;
    }

    const dominantColorKey = Object.keys(colorCounts).reduce((a, b) => colorCounts[a] > colorCounts[b] ? a : b);
    const targetBorderColor = dominantColorKey.split(',').map(Number);

    // 2. Use a flood-fill algorithm to find all connected border pixels.
    const queue = [];
    const visited = new Array(width * height).fill(false);
    const borderPixels = [];

    // Seed the queue with all perimeter pixels that match the detected border color.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            if (y === 0 || y === height - 1 || x === 0 || x === width - 1) {
                const index = y * width + x;
                const currentPixelColor = getPixel(x, y);
                if (!visited[index] && colorDistance(currentPixelColor, targetBorderColor) <= tolerance) {
                    queue.push([x, y]);
                    visited[index] = true;
                }
            }
        }
    }
    
    // Process the queue to find all border pixels
    while (queue.length > 0) {
        const [x, y] = queue.shift();
        borderPixels.push({ x, y });

        const neighbors = [
            [x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]
        ];

        for (const [nx, ny] of neighbors) {
            if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
                const nIndex = ny * width + nx;
                if (!visited[nIndex]) {
                    const neighborColor = getPixel(nx, ny);
                    if (colorDistance(neighborColor, targetBorderColor) <= tolerance) {
                        visited[nIndex] = true;
                        queue.push([nx, ny]);
                    }
                }
            }
        }
    }


    // 3. Draw the new, thicker border over the original image.
    ctx.fillStyle = borderColor;
    const offset = Math.floor(borderThickness / 2);

    for (const pixel of borderPixels) {
        ctx.fillRect(pixel.x - offset, pixel.y - offset, borderThickness, borderThickness);
    }

    return canvas;
}