Photo Rodenstock Digital Vario ND Filter Effect Tool

function processImage(originalImg, densityFactor = 4.0) {
    // 1. Parameter processing and validation
    // Ensure densityFactor is a number. If it's a string, parse it.
    let numericDensityFactor = parseFloat(densityFactor);

    // If parsing fails or the original type was not a number/string that converts to a valid number
    if (isNaN(numericDensityFactor)) {
        console.warn(`Invalid densityFactor: "${densityFactor}". Using default value 4.0.`);
        numericDensityFactor = 4.0;
    }

    // An ND (Neutral Density) filter reduces light. A factor less than 1.0 would brighten the image,
    // which is not the effect of an ND filter. A factor of 1.0 means no change in light.
    if (numericDensityFactor < 1.0) {
        // Clamp to 1.0 to prevent brightening and division by zero or negative values if factor was <=0.
        numericDensityFactor = 1.0;
    }

    // 2. Create canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 3. Set canvas dimensions
    // Use naturalWidth/naturalHeight for the image's intrinsic dimensions.
    // Fallback to width/height if naturalWidth/Height are not available (e.g. for some types of image sources or states).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image dimensions might be zero (e.g., image not loaded, or invalid image object)
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero dimensions. Returning an empty canvas.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas; // Return an empty canvas as per constraints (must return a canvas).
    }

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

    // 4. Draw original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error drawing image to canvas: ", e);
        // If drawing fails (e.g., image not fully loaded, corrupted, or invalid format for drawing),
        // return the canvas. It will be blank or in an indeterminate state depending on the error.
        return canvas;
    }

    // 5. Get image data for pixel manipulation
    // This operation can throw a SecurityError if the image is loaded from a different origin
    // and the server does not provide appropriate CORS headers (Access-Control-Allow-Origin).
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data (this can be due to cross-origin issues): ", e);
        // If we can't get image data, we can't process the pixels.
        // Return the canvas with the original image drawn on it (unprocessed).
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // 6. Apply the ND filter effect
    // Iterate through the pixel data. Each pixel consists of 4 components: R, G, B, A.
    // An ND filter reduces the intensity of light across the visible spectrum as evenly as possible.
    // This is simulated by dividing the R, G, B components by the densityFactor.
    // The alpha channel (transparency) is typically not affected by an ND filter.
    for (let i = 0; i < data.length; i += 4) {
        data[i] = data[i] / numericDensityFactor;         // Red component
        data[i + 1] = data[i + 1] / numericDensityFactor; // Green component
        data[i + 2] = data[i + 2] / numericDensityFactor; // Blue component
        // data[i + 3] (Alpha component) remains unchanged.
    }

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

    // 8. Return the processed canvas
    return canvas;
}