Image Singh-Ray Vari-ND Filter Effect Application

function processImage(originalImg, stops = 3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth and naturalHeight for correctly loaded images
    // These properties reflect the intrinsic dimensions of the image.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // If image is not loaded or dimensions are zero, it might indicate an issue.
    // Return an empty or minimal canvas to avoid errors downstream.
    if (width === 0 || height === 0) {
        canvas.width = 1; // Avoid 0x0 canvas if possible, though behavior might vary by browser
        canvas.height = 1;
        // Optionally, you could draw a small indicator or log a warning
        // console.warn("Original image has zero or invalid dimensions. Returning minimal canvas.");
        return canvas;
    }

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

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

    // Ensure 'stops' parameter is a number. If it's a string, convert it.
    // Then ensure it's non-negative, as negative stops would brighten the image,
    // which is not an ND filter effect.
    const numericStops = Number(stops);
    const effectiveStops = Math.max(0, numericStops);
    
    // If 'stops' was an unparseable string (e.g., "abc"), numericStops will be NaN.
    // Math.max(0, NaN) is NaN. Math.pow(0.5, NaN) is NaN.
    // Multiplying by NaN and assigning to Uint8ClampedArray results in 0.
    // So, an invalid 'stops' value will correctly result in a black image.

    // Calculate the reduction factor. Each stop halves the amount of light.
    // The formula for the factor is (0.5) ^ number_of_stops.
    const reductionFactor = Math.pow(0.5, effectiveStops);

    // If reductionFactor is 1 (e.g., 0 stops, or potentially if effectiveStops was NaN and then Pow gave 1 - edge case handling),
    // no change is needed to the pixel data.
    // Math.pow(0.5, 0) is 1.
    // Math.pow(0.5, NaN) is NaN.
    // So this check primarily optimizes for the `stops = 0` case.
    if (reductionFactor === 1) {
        return canvas; // Return canvas with the original image drawn
    }

    // Get the pixel data from the canvas.
    // imageData.data is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Apply the reduction factor to each pixel's Red, Green, and Blue components.
    // The Alpha component remains unchanged.
    for (let i = 0; i < data.length; i += 4) {
        data[i] = data[i] * reductionFactor;         // Red
        data[i + 1] = data[i + 1] * reductionFactor; // Green
        data[i + 2] = data[i + 2] * reductionFactor; // Blue
        // data[i+3] (Alpha) is unchanged
    }

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

    return canvas;
}