Image Content Finder

/**
 * Finds the content of an image by trimming solid-colored or transparent borders.
 * It determines a background color and then scans inward from the edges to find
 * the bounding box of all pixels that are not the background color.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} tolerance A number from 0-255 representing the color difference
 *                           allowed for a pixel to be considered part of the background.
 *                           A higher value is more lenient. Default is 10.
 * @param {string} sample A string indicating how to determine the background color.
 *                        - 'auto' or 'topLeft': Use the top-left pixel color (default).
 *                        - 'topRight', 'bottomLeft', 'bottomRight': Use the color of the respective corner pixel.
 *                        - 'transparent': Assume a transparent background.
 *                        - Any valid CSS color string (e.g., 'white', '#FFFFFF'): Use that specific color.
 * @returns {HTMLCanvasElement} A new canvas element containing only the trimmed content of the image.
 */
function processImage(originalImg, tolerance = 10, sample = 'auto') {

    /**
     * Parses a CSS color string into an RGBA object.
     * @param {string} colorStr The CSS color string (e.g., 'white', '#FF0000').
     * @returns {{r: number, g: number, b: number, a: number}} An object with RGBA values.
     */
    const parseColor = (colorStr) => {
        const canvas = document.createElement('canvas');
        canvas.width = canvas.height = 1;
        const ctx = canvas.getContext('2d', { willReadFrequently: true });
        ctx.fillStyle = colorStr;
        ctx.fillRect(0, 0, 1, 1);
        const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
        return { r, g, b, a };
    };

    /**
     * Retrieves the RGBA values of a pixel from raw image data.
     * @param {number} x The x-coordinate of the pixel.
     * @param {number} y The y-coordinate of the pixel.
     * @param {number} width The width of the source image.
     * @param {Uint8ClampedArray} data The image data array.
     * @returns {{r: number, g: number, b: number, a: number}} An object with RGBA values.
     */
    const getPixel = (x, y, width, data) => {
        const i = (y * width + x) * 4;
        return { r: data[i], g: data[i + 1], b: data[i + 2], a: data[i + 3] };
    };
    
    // === Main Logic ===

    // Stage 1: Setup a temporary canvas to read image pixel data.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Handle empty or invalid images gracefully.
    if (width === 0 || height === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        return emptyCanvas;
    }

    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(originalImg, 0, 0);
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Stage 2: Determine the background color to trim based on the 'sample' parameter.
    let targetColor;
    switch (sample.toLowerCase()) {
        case 'auto':
        case 'topleft':
            targetColor = getPixel(0, 0, width, data);
            break;
        case 'topright':
            targetColor = getPixel(width - 1, 0, width, data);
            break;
        case 'bottomleft':
            targetColor = getPixel(0, height - 1, width, data);
            break;
        case 'bottomright':
            targetColor = getPixel(width - 1, height - 1, width, data);
            break;
        case 'transparent':
            targetColor = { r: 0, g: 0, b: 0, a: 0 };
            break;
        default:
            try {
                targetColor = parseColor(sample);
            } catch (e) {
                console.error("Invalid color sample provided. Defaulting to 'topLeft'.", e);
                targetColor = getPixel(0, 0, width, data);
            }
    }

    // This function checks if a pixel's color is within the tolerance of the target background color.
    const isBackground = (r, g, b, a) => {
        if (targetColor.a === 0) { // Special case for pure transparency.
            return a === 0;
        }
        if (a === 0) { // Any fully transparent pixel is considered background.
            return true;
        }
        const diffR = Math.abs(r - targetColor.r);
        const diffG = Math.abs(g - targetColor.g);
        const diffB = Math.abs(b - targetColor.b);
        return diffR <= tolerance && diffG <= tolerance && diffB <= tolerance;
    };

    // Stage 3: Scan from the edges inward to find the content's bounding box.
    let top = 0, bottom = height - 1, left = 0, right = width - 1;
    let foundContent = false;

    // Scan from top
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;
            if (!isBackground(data[i], data[i+1], data[i+2], data[i+3])) {
                top = y;
                foundContent = true;
                break;
            }
        }
        if (foundContent) break;
    }

    // If no content was found, the image is entirely background.
    if (!foundContent) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1; emptyCanvas.height = 1;
        return emptyCanvas;
    }

    // Scan from bottom
    foundContent = false;
    for (let y = height - 1; y >= top; y--) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;
            if (!isBackground(data[i], data[i+1], data[i+2], data[i+3])) {
                bottom = y;
                foundContent = true;
                break;
            }
        }
        if (foundContent) break;
    }

    // Scan from left
    foundContent = false;
    for (let x = 0; x < width; x++) {
        for (let y = top; y <= bottom; y++) {
            const i = (y * width + x) * 4;
            if (!isBackground(data[i], data[i+1], data[i+2], data[i+3])) {
                left = x;
                foundContent = true;
                break;
            }
        }
        if (foundContent) break;
    }

    // Scan from right
    foundContent = false;
    for (let x = width - 1; x >= left; x--) {
        for (let y = top; y <= bottom; y++) {
            const i = (y * width + x) * 4;
            if (!isBackground(data[i], data[i+1], data[i+2], data[i+3])) {
                right = x;
                foundContent = true;
                break;
            }
        }
        if (foundContent) break;
    }

    // Stage 4: Create the final canvas and draw the trimmed image content onto it.
    const newWidth = right - left + 1;
    const newHeight = bottom - top + 1;

    const resultCanvas = document.createElement('canvas');
    resultCanvas.width = newWidth;
    resultCanvas.height = newHeight;
    const resultCtx = resultCanvas.getContext('2d');
    
    resultCtx.drawImage(
        originalImg,
        left, top, newWidth, newHeight, // Source rectangle (from original image)
        0, 0, newWidth, newHeight       // Destination rectangle (on new canvas)
    );

    return resultCanvas;
}