Image Variable ND Filter Effect Tool

function processImage(originalImg, parameter1 = 2) {
    // parameter1 represents the 'stops' of light reduction for the ND filter effect.
    // For example, a value of 1 means halving the light (2^1 = 2x reduction).
    // A value of 2 means quartering the light (2^2 = 4x reduction).
    // Higher values result in a darker image.
    // The default value for parameter1 is 2 stops.

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

    // Use naturalWidth and naturalHeight to get the intrinsic dimensions of the image,
    // ensuring we process the image at its original resolution.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // If the image has no dimensions (e.g., it hasn't loaded correctly or is an empty image),
    // set the canvas dimensions accordingly and return it.
    if (width === 0 || height === 0) {
        canvas.width = width;
        canvas.height = height;
        return canvas;
    }

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

    // Draw the original image onto the canvas.
    try {
        ctx.drawImage(originalImg, 0, 0, width, height);
    } catch (e) {
        // If an error occurs during drawing (e.g., for security reasons with certain SVG files,
        // or if the image isn't fully decoded/supported for canvas drawing),
        // return the canvas as is. It might be empty or partially drawn.
        // console.error("Error drawing image on canvas:", e);
        return canvas;
    }
    
    // Validate and normalize the 'stops' parameter (parameter1).
    // It should be a number. Convert if it's a string representation of a number.
    let numStops = Number(parameter1);

    // If parameter1 is not a valid number (e.g., "abc" or NaN),
    // use the default value of 2 stops.
    if (isNaN(numStops)) {
        numStops = 2; 
    }

    // A Neutral Density (ND) filter reduces light. Negative stops would imply increasing light,
    // which is not the standard behavior of an ND filter.
    // We therefore clamp 'numStops' to be non-negative.
    const effectiveStops = Math.max(0, numStops);

    // If there's no light reduction (0 stops), the image remains unchanged.
    // The original image is already on the canvas, so we can return it directly.
    if (effectiveStops === 0) {
        return canvas;
    }

    // Attempt to get the pixel data from the canvas.
    // This operation can fail if the canvas has become "tainted", typically due to
    // drawing a cross-origin image without proper CORS headers.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // If getImageData fails, pixel manipulation is not possible.
        // Return the canvas with the original image drawn; the ND effect cannot be applied.
        // console.error("Error getting image data from canvas:", e);
        return canvas;
    }
    
    const data = imageData.data;
    // Calculate the light reduction factor. For 's' stops, light intensity is divided by 2^s.
    const factor = Math.pow(2, effectiveStops);

    // Iterate through each pixel in the image data.
    // Each pixel is represented by 4 consecutive values in the data array: Red, Green, Blue, Alpha.
    for (let i = 0; i < data.length; i += 4) {
        // Reduce the intensity of the Red, Green, and Blue channels by the calculated factor.
        // Math.floor is used to ensure pixel component values remain integers.
        data[i] = Math.floor(data[i] / factor);     // Red component
        data[i + 1] = Math.floor(data[i + 1] / factor); // Green component
        data[i + 2] = Math.floor(data[i + 2] / factor); // Blue component
        // The Alpha channel (data[i + 3]), representing opacity, typically remains unchanged by an ND filter.
    }

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

    return canvas;
}