Image NiSi Nano IR ND Filter Effect Tool

function processImage(originalImg, stops = 3) {
    let currentStops;

    // Validate and parse the 'stops' parameter
    if (typeof stops === 'string') {
        currentStops = parseFloat(stops);
    } else if (typeof stops === 'number') {
        currentStops = stops;
    } else {
        // Fallback for other types (e.g., null, or if default somehow bypassed)
        // The function signature `stops = 3` handles 'undefined'.
        // This handles `null` or other unexpected types passed for `stops`.
        currentStops = 3;
    }

    // If parsing resulted in NaN, or if stops is negative, revert to a sensible default (e.g., 3 stops).
    // Or, if negative, it implies less light reduction or even brightening, which is not what ND filters do.
    // For negative stops, we could clamp to 0 (no effect). Let's opt for reverting to default for simplicity
    // if the value is not a valid, non-negative number of stops.
    if (isNaN(currentStops) || currentStops < 0) {
        currentStops = 3; // Default to 3 stops if input is invalid or negative
    }

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

    // Ensure the original image is loaded and has dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    if (!imgWidth || !imgHeight) {
        // This typically means the image hasn't loaded or is invalid.
        // Return an empty canvas or handle error appropriately.
        // For now, setting a default small size to avoid 0x0 canvas issues.
        canvas.width = 1;
        canvas.height = 1;
        console.error("Image not loaded or has zero dimensions.");
        return canvas;
    }

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

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

    // If 0 stops, no darkening effect is applied. Return the canvas with the original image.
    if (currentStops === 0) {
        return canvas;
    }

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Calculate the light reduction factor. Each stop halves the light.
    // factor = (1/2) ^ stops = 0.5 ^ stops
    const factor = Math.pow(0.5, currentStops);

    // Apply the ND filter effect by reducing RGB values
    for (let i = 0; i < data.length; i += 4) {
        // R, G, B channels are multiplied by the factor
        data[i] = Math.round(data[i] * factor);     // Red
        data[i + 1] = Math.round(data[i + 1] * factor); // Green
        data[i + 2] = Math.round(data[i + 2] * factor); // Blue
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}