Photo Fog Filter Application

function processImage(originalImg, fogColorParam = "220,220,220", fogIntensityParam = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Optimization for frequent getImageData

    // Ensure originalImg has dimensions.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        // Cannot process an image with no dimensions.
        // Return a small, empty canvas or handle error as appropriate.
        console.error("Image has zero dimensions. Cannot apply fog filter.");
        canvas.width = 1; // Avoid errors if something tries to use this canvas
        canvas.height = 1;
        return canvas;
    }

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

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // --- Fog Intensity Parsing and Validation ---
    let intensity = Number(fogIntensityParam); // Converts string to number, handles actual numbers.

    // If fogIntensityParam was undefined, ES6 default (0.5) is used, Number(0.5) is 0.5.
    // If fogIntensityParam was null, Number(null) is 0.
    // If fogIntensityParam was "" or "  ", Number("") is 0.
    // If fogIntensityParam was "abc", Number("abc") is NaN.
    if (isNaN(intensity)) {
        intensity = 0.5; // Fallback to conceptual default if parsing results in NaN
    }
    intensity = Math.max(0, Math.min(1, intensity)); // Clamp to [0, 1] range

    // If fog intensity is zero, no fog effect is applied. Return the canvas with the original image.
    if (intensity === 0) {
        return canvas;
    }

    // --- Fog Color Parsing ---
    // Ensure fogColorParam is a string (ES6 default handles undefined)
    const fogColorStr = String(fogColorParam); 
    
    let fogR, fogG, fogB;
    const defaultFogRGB = [220, 220, 220]; // Default: light gray

    // Attempt to parse fogColorStr as "R,G,B"
    const parts = fogColorStr.split(',').map(s => parseInt(s.trim(), 10));
    if (parts.length === 3 && parts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
        [fogR, fogG, fogB] = parts;
    } else {
        // If not "R,G,B", attempt to parse as a CSS color string (e.g., "white", "#FFF", "rgb(255,255,255)")
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        const tempCtx = tempCanvas.getContext('2d');
        
        // Set a known fallback fillStyle. If fogColorStr is invalid and the browser ignores
        // the assignment, this color will be used. Some browsers might default to black for invalid colors.
        tempCtx.fillStyle = `rgb(${defaultFogRGB[0]}, ${defaultFogRGB[1]}, ${defaultFogRGB[2]})`;
        
        // Attempt to apply the user-provided color string.
        // examples: "red", "#FF0000", "rgba(0,255,0,0.5)", "nonsense", "null" (if null was passed).
        tempCtx.fillStyle = fogColorStr; 
        
        tempCtx.fillRect(0, 0, 1, 1); // Draw the resulting color onto the 1x1 temp canvas
        const pixelData = tempCtx.getImageData(0, 0, 1, 1).data;
        
        // Use the R, G, B values from the drawn pixel.
        // If fogColorStr was invalid (e.g., "nonsense" or the string "null"):
        // - Browser might ignore it, using the fallback `defaultFogRGB`.
        // - Browser might parse it as black `rgb(0,0,0)`.
        // - Browser might parse it as transparent black `rgba(0,0,0,0)`.
        // In all these cases, pixelData will give us usable R,G,B values (e.g. default, or 0,0,0).
        // The alpha component of the fog color (pixelData[3]) is not directly used in the fog blending formula below.
        fogR = pixelData[0];
        fogG = pixelData[1];
        fogB = pixelData[2];
    }

    // Get image data from the main canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const invIntensity = 1 - intensity; // Pre-calculate for efficiency

    // Apply fog effect pixel by pixel
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha (data[i+3]) remains unchanged

        // Blend current pixel color with fog color based on intensity
        // NewColor = OriginalColor * (1 - intensity) + FogColor * intensity
        data[i] = Math.round(r * invIntensity + fogR * intensity);
        data[i + 1] = Math.round(g * invIntensity + fogG * intensity);
        data[i + 2] = Math.round(b * invIntensity + fogB * intensity);
    }

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

    return canvas;
}