Image Neutral Density Filter Effect Tool

function processImage(originalImg, fStopsReductionParam = 1) {
    let fStopsReduction = fStopsReductionParam;

    // Validate fStopsReduction parameter
    if (typeof fStopsReduction !== 'number' || Number.isNaN(fStopsReduction)) {
        console.warn(`fStopsReduction parameter must be a number. Received: "${fStopsReductionParam}". Using the default value of 1.`);
        fStopsReduction = 1; // Default value from function signature
    } else if (fStopsReduction < 0) {
        console.warn(`fStopsReduction parameter must be non-negative. Received: ${fStopsReductionParam}. Applying 0 stops (no effect).`);
        fStopsReduction = 0; // No effect for negative values that are otherwise valid numbers
    }

    // Check if the image is a valid, fully loaded HTMLImageElement with dimensions
    if (!originalImg || 
        !(originalImg instanceof HTMLImageElement) || // Ensure it's an Image object
        typeof originalImg.complete !== 'boolean' || !originalImg.complete ||
        typeof originalImg.naturalWidth !== 'number' || originalImg.naturalWidth === 0 ||
        typeof originalImg.naturalHeight !== 'number' || originalImg.naturalHeight === 0) {
        
        console.warn("Provided originalImg is not a valid, fully loaded image with dimensions. Returning an empty canvas.");
        const emptyCanvas = document.createElement('canvas');
        // Attempt to use naturalWidth/Height if available, otherwise default to 0x0
        emptyCanvas.width = (originalImg && typeof originalImg.naturalWidth === 'number') ? originalImg.naturalWidth : 0;
        emptyCanvas.height = (originalImg && typeof originalImg.naturalHeight === 'number') ? originalImg.naturalHeight : 0;
        return emptyCanvas;
    }
    
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        console.error("Failed to get 2D rendering context for canvas. The browser might not support it or the context limit might be reached.");
        // Guideline: return canvas (preferred) or Image. Fallback to originalImg if context creation fails.
        return originalImg;
    }

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

    // If fStopsReduction is 0, no pixel changes are needed.
    // The canvas already has the original image drawn on it.
    if (fStopsReduction === 0) {
        return canvas;
    }

    // Calculate the light intensity multiplier.
    // An ND filter reduces light intensity.
    // 1 f-stop reduction halves the light (multiplier = 0.5).
    // 2 f-stops reduction quarters the light (multiplier = 0.25).
    // General formula: multiplier = (0.5) ^ fStopsReduction
    const multiplier = Math.pow(0.5, fStopsReduction);

    try {
        // Try to manipulate pixels directly for best accuracy.
        // This requires canvas not to be tainted (e.g. by cross-origin image without CORS headers)
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data; // data is a Uint8ClampedArray

        for (let i = 0; i < data.length; i += 4) {
            data[i] = Math.round(data[i] * multiplier);     // Red component
            data[i + 1] = Math.round(data[i + 1] * multiplier); // Green component
            data[i + 2] = Math.round(data[i + 2] * multiplier); // Blue component
            // Alpha channel (data[i+3]) remains unchanged for an ND filter effect
        }
        ctx.putImageData(imageData, 0, 0);
    } catch (e) {
        // Fallback if getImageData/putImageData fails (e.g., tainted canvas)
        console.warn(`Pixel manipulation failed (possibly due to tainted canvas: ${e.message}). Applying ND effect using a fallback overlay method.`);
        
        // The original image is already drawn on the canvas.
        // Apply a semi-transparent black overlay.
        // The opacity of this black overlay determines the strength of the effect.
        // opacity = 1 - amount_of_light_passing_through
        // amount_of_light_passing_through = multiplier
        // So, opacity for black overlay = 1 - multiplier.
        // When drawing a color (src) over a base (dst) with alpha:
        // FinalColor = SrcColor * SrcAlpha + DstColor * (1 - SrcAlpha)
        // Here, SrcColor is black (0,0,0), SrcAlpha is (1-multiplier), DstColor is original image pixel.
        // FinalColor = (0,0,0) * (1-multiplier) + OriginalPixelColor * (1 - (1-multiplier))
        // FinalColor = OriginalPixelColor * multiplier. This achieves the desired effect.
        ctx.fillStyle = `rgba(0, 0, 0, ${1 - multiplier})`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    return canvas;
}