Image Silhouette Creator

function processImage(originalImg, silhouetteColor = "black", threshold = 10) {
    // Validate and parse the threshold parameter
    let numericThreshold = Number(threshold);
    // If threshold is null, not a number, or out of 0-255 range, use default.
    if (threshold === null || isNaN(numericThreshold) || numericThreshold < 0 || numericThreshold > 255) {
        numericThreshold = 10;
    }

    const canvas = document.createElement('canvas');
    // { willReadFrequently: true } is an optimization hint for an_canvas operations
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); 

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        // This typically means the image hasn't loaded, is invalid, or has no dimensions.
        // Create a small canvas with an error message.
        canvas.width = 150; 
        canvas.height = 100;
        ctx.fillStyle = '#f0f0f0'; // Light gray background
        ctx.fillRect(0,0,canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Invalid image', canvas.width / 2, canvas.height / 2 -10);
        ctx.fillText('or not loaded.', canvas.width / 2, canvas.height / 2 +10);
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the_canvas. This is needed to access pixel data.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        // This error often occurs due to cross-origin issues (tainted canvas).
        // Clear the canvas (which might have the original image drawn) and display an error message.
        ctx.clearRect(0,0, canvas.width, canvas.height); 
        ctx.fillStyle = '#f0f0f0'; // Light gray background for the error message
        ctx.fillRect(0,0,canvas.width, canvas.height);
        ctx.fillStyle = 'red'; // Red text for error
        ctx.font = 'bold 14px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Prepare multi-line error message
        const lines = [`Error:Cannot process pixel data`, `(Image might be cross-origin`, `without CORS headers)`];
        const lineHeight = 16; // Approximate line height
        let yPos = canvas.height / 2 - (lines.length -1) * lineHeight / 2; // Center vertically

        for(const line of lines){
            ctx.fillText(line, canvas.width / 2, yPos);
            yPos += lineHeight;
        }
        return canvas;
    }
    
    const data = imageData.data; // The pixel data array (RGBA)

    // Determine the RGB values for the silhouette color.
    // A temporary 1x1 canvas is used to parse the color string (handles names, hex, rgb(), etc.).
    let rSilhouette, gSilhouette, bSilhouette;
    const tempCanvasColor = document.createElement('canvas');
    tempCanvasColor.width = 1;
    tempCanvasColor.height = 1;
    const tempCtxColor = tempCanvasColor.getContext('2d');
    
    let finalSilhouetteColor = silhouetteColor;
    // Ensure silhouetteColor is a string; if null or not a string, default to "black".
    if (silhouetteColor === null || typeof silhouetteColor !== 'string') {
        finalSilhouetteColor = "black";
    }
    
    // Browsers typically default to black for invalid color strings.
    tempCtxColor.fillStyle = finalSilhouetteColor; 
    tempCtxColor.fillRect(0, 0, 1, 1); // Draw the color onto the temp canvas
    const colorPixelData = tempCtxColor.getImageData(0, 0, 1, 1).data; // Read the RGBA values
    rSilhouette = colorPixelData[0];
    gSilhouette = colorPixelData[1];
    bSilhouette = colorPixelData[2];

    // Iterate through each pixel of the image data.
    // Each pixel is represented by 4 consecutive values in the data array: R, G, B, A.
    for (let i = 0; i < data.length; i += 4) {
        const alpha = data[i + 3]; // Get the alpha component of the current pixel

        if (alpha >= numericThreshold) {
            // If alpha is above or equal to threshold, this pixel is part of the silhouette.
            data[i] = rSilhouette;     // Set Red component
            data[i + 1] = gSilhouette; // Set Green component
            data[i + 2] = bSilhouette; // Set Blue component
            data[i + 3] = 255;         // Set Alpha to fully opaque
        } else {
            // If alpha is below threshold, this pixel is part of the background.
            data[i + 3] = 0; // Set Alpha to fully transparent
            // R, G, B values for fully transparent pixels don't need to be changed as they won't be visible.
        }
    }

    // Put the modified pixel data back onto the_canvas.
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}