Image Lee Big Stopper 10-Stop ND Filter Effect Tool

async function processImage(originalImg, blurRadiusParam = 5, colorCastAmountParam = 0.1, castColorParam = "60,80,120", desaturationParam = 0.05) {
    // Parameter validation and type coercion
    let blurRadius = Number(blurRadiusParam);
    if (isNaN(blurRadius)) {
        console.warn(`Invalid blurRadius provided: "${blurRadiusParam}". Must be a number. Using default 5.`);
        blurRadius = 5;
    }
    blurRadius = Math.max(0, blurRadius); // Ensure non-negative

    let colorCastAmount = Number(colorCastAmountParam);
    if (isNaN(colorCastAmount)) {
        console.warn(`Invalid colorCastAmount provided: "${colorCastAmountParam}". Must be a number. Using default 0.1.`);
        colorCastAmount = 0.1;
    }
    colorCastAmount = Math.max(0, Math.min(1, colorCastAmount)); // Clamp between 0 and 1

    let desaturation = Number(desaturationParam);
    if (isNaN(desaturation)) {
        console.warn(`Invalid desaturation provided: "${desaturationParam}". Must be a number. Using default 0.05.`);
        desaturation = 0.05;
    }
    desaturation = Math.max(0, Math.min(1, desaturation)); // Clamp between 0 and 1

    const castColorStr = String(castColorParam); // Ensure it's a string for split
    const colorParts = castColorStr.split(',').map(s => parseFloat(s.trim()));
    let parsedCastR, parsedCastG, parsedCastB;

    if (colorParts.length === 3 && colorParts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
        [parsedCastR, parsedCastG, parsedCastB] = colorParts;
    } else {
        console.warn(`Invalid castColor provided: "${castColorParam}". Expected 'R,G,B' string with R,G,B values between 0-255. Using default "60,80,120".`);
        parsedCastR = 60; // Default cool blue/grey tint
        parsedCastG = 80;
        parsedCastB = 120;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Create a temporary canvas to hold the image after color/desaturation ops, before blur
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = imgWidth;
    tempCanvas.height = imgHeight;

    // 1. Draw original image to temp canvas
    tempCtx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 2. Pixel manipulation for color cast and desaturation on tempCanvas
    // Only process pixels if there's an effect to apply
    if (colorCastAmount > 0 || desaturation > 0) {
        const imageData = tempCtx.getImageData(0, 0, imgWidth, imgHeight);
        const data = imageData.data;

        for (let i = 0; i < data.length; i += 4) {
            let r = data[i];
            let g = data[i + 1];
            let b = data[i + 2];

            // Apply Color Cast (simulates the filter's tint)
            if (colorCastAmount > 0) {
                r = r * (1 - colorCastAmount) + parsedCastR * colorCastAmount;
                g = g * (1 - colorCastAmount) + parsedCastG * colorCastAmount;
                b = b * (1 - colorCastAmount) + parsedCastB * colorCastAmount;
            }
            
            // Apply Desaturation (simulates long exposure effect, e.g., on water/sky)
            if (desaturation > 0) {
                // Calculate luminance based on (potentially) color-casted pixel
                const gray = 0.299 * r + 0.587 * g + 0.114 * b; 
                r = r * (1 - desaturation) + gray * desaturation;
                g = g * (1 - desaturation) + gray * desaturation;
                b = b * (1 - desaturation) + gray * desaturation;
            }
            
            data[i] = Math.round(Math.max(0, Math.min(255, r)));
            data[i + 1] = Math.round(Math.max(0, Math.min(255, g)));
            data[i + 2] = Math.round(Math.max(0, Math.min(255, b)));
        }
        tempCtx.putImageData(imageData, 0, 0); // Modified image is now on tempCanvas
    }
    // If no colorCastAmount and no desaturation, tempCanvas still correctly holds the original image.

    // 3. Apply Blur (simulates motion blur from long exposure)
    // Draw from tempCanvas to the main canvas, applying blur in the process.
    if (blurRadius > 0) {
        ctx.filter = `blur(${blurRadius}px)`;
        ctx.drawImage(tempCanvas, 0, 0, imgWidth, imgHeight); 
        ctx.filter = 'none'; // Reset filter on the main canvas context
    } else {
        // No blur, just copy the (potentially modified) image from tempCanvas to the main canvas
        ctx.drawImage(tempCanvas, 0, 0, imgWidth, imgHeight);
    }
    
    return canvas;
}