Image Fog Filter Effect Tool

function processImage(originalImg, fogColorStr = "200,200,200", fogDensity = 0.5) {
    const canvas = document.createElement('canvas');
    let ctx;

    // Attempt to get 2D context with willReadFrequently hint
    try {
        ctx = canvas.getContext('2d', { willReadFrequently: true });
    } catch (e) {
        // Fallback for older browsers or environments that don't support the options object
        ctx = canvas.getContext('2d');
    }

    // Ensure originalImg has dimensions (i.e., it's loaded and is a valid image)
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has no dimensions (width or height is 0). Ensure the image is loaded and valid before processing.");
        // Return an empty canvas (0x0)
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

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

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

    // Try to get image data; this can fail due to CORS if the image is cross-origin
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Could not get image data from canvas. This might be due to CORS policy if the image is cross-origin. Error: ", e);
        // Return the canvas with the original image drawn, but without the effect,
        // as pixel manipulation is not possible.
        return canvas;
    }
    
    const data = imageData.data;

    // Parse and validate fogColorStr
    // Default fog color components (light gray)
    let rFog = 200, gFog = 200, bFog = 200; 
    
    // Ensure fogColorStr is treated as a string for split
    const colorParts = String(fogColorStr).split(',').map(s => parseInt(s.trim(), 10));

    if (colorParts.length === 3 && colorParts.every(c => !isNaN(c))) {
        rFog = Math.max(0, Math.min(255, colorParts[0])); // Clamp R to 0-255
        gFog = Math.max(0, Math.min(255, colorParts[1])); // Clamp G to 0-255
        bFog = Math.max(0, Math.min(255, colorParts[2])); // Clamp B to 0-255
    } else {
        console.warn(`Invalid fogColorStr "${fogColorStr}" provided. Using default RGB(${rFog},${gFog},${bFog}).`);
    }

    // Parse and validate fogDensity
    let density = parseFloat(String(fogDensity)); // Ensure fogDensity is treated as string for parseFloat, then convert to number
    
    if (isNaN(density)) {
        console.warn(`Invalid fogDensity "${fogDensity}" provided. Using default 0.5.`);
        density = 0.5; // Default density if parsing fails
    }
    // Clamp density between 0 (no fog) and 1 (full fog color)
    density = Math.max(0, Math.min(1, density)); 
    
    const invDensity = 1 - density;

    // Apply the fog effect by blending each pixel with the fog color
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Original Red component
        const g = data[i + 1]; // Original Green component
        const b = data[i + 2]; // Original Blue component
        // data[i + 3] is the Alpha component, which we'll leave unchanged for this effect

        // Blend original pixel color with fog color based on density
        data[i] = Math.round(r * invDensity + rFog * density);     // New Red
        data[i + 1] = Math.round(g * invDensity + gFog * density); // New Green
        data[i + 2] = Math.round(b * invDensity + bFog * density); // New Blue
    }

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

    return canvas;
}