Image Baggage Remover Tool

function processImage(originalImg, removalMode = "background", tolerance = "30") {
    // "Baggage" could refer to background clutter or EXIF metadata.
    // Drawing to a canvas natively strips EXIF metadata. 
    // If removalMode is "background", we additionally apply a flood-fill algorithm 
    // to remove the surrounding color based on the four corners.
    
    const tol = parseInt(tolerance, 10) || 30;
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    // Draw the image, inherently stripping metadata (EXIF "baggage")
    ctx.drawImage(originalImg, 0, 0);
    
    if (removalMode.toLowerCase() === "metadata") {
        return canvas;
    }
    
    // Extract Image Data for Background/Edge Clutter Removal
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    function getPixel(x, y) {
        if (x < 0 || y < 0 || x >= width || y >= height) return null;
        const idx = (y * width + x) * 4;
        return [data[idx], data[idx + 1], data[idx + 2], data[idx + 3]];
    }
    
    function matchColor(idx, target) {
        const r = data[idx];
        const g = data[idx + 1];
        const b = data[idx + 2];
        const a = data[idx + 3];
        
        if (a === 0) return false; // Already transparent
        
        const diff = Math.max(
            Math.abs(r - target[0]),
            Math.abs(g - target[1]),
            Math.abs(b - target[2])
        );
        return diff <= tol;
    }
    
    function floodFill(startX, startY) {
        const startColor = getPixel(startX, startY);
        // Stop if invalid or already fully transparent
        if (!startColor || startColor[3] === 0) return;
        
        const stack = [[startX, startY]];
        
        while (stack.length > 0) {
            const [x, y] = stack.pop();
            let currentY = y;
            let idx = (currentY * width + x) * 4;
            
            // Traverse up
            while (currentY >= 0 && matchColor(idx, startColor)) {
                currentY--;
                idx -= width * 4;
            }
            
            currentY++;
            idx += width * 4;
            
            let reachLeft = false;
            let reachRight = false;
            
            // Traverse down
            while (currentY < height && matchColor(idx, startColor)) {
                // Erase pixel (set to transparent)
                data[idx] = 0;
                data[idx + 1] = 0;
                data[idx + 2] = 0;
                data[idx + 3] = 0;
                
                if (x > 0) {
                    const leftIdx = idx - 4;
                    if (matchColor(leftIdx, startColor)) {
                        if (!reachLeft) {
                            stack.push([x - 1, currentY]);
                            reachLeft = true;
                        }
                    } else {
                        reachLeft = false;
                    }
                }
                
                if (x < width - 1) {
                    const rightIdx = idx + 4;
                    if (matchColor(rightIdx, startColor)) {
                        if (!reachRight) {
                            stack.push([x + 1, currentY]);
                            reachRight = true;
                        }
                    } else {
                        reachRight = false;
                    }
                }
                
                currentY++;
                idx += width * 4;
            }
        }
    }
    
    // Initiate flood fill from all four corners to clear outer boundary baggage 
    floodFill(0, 0);
    floodFill(width - 1, 0);
    floodFill(0, height - 1);
    floodFill(width - 1, height - 1);
    
    ctx.putImageData(imgData, 0, 0);
    return canvas;
}