Image Hoya Pro ND Filter Effect Application

function processImage(originalImg, ndFactor = 64) {
    const canvas = document.createElement('canvas');
    
    // Handle cases where the originalImg might be null, undefined, or not yet loaded.
    // An Image object that is not loaded will have naturalWidth and naturalHeight of 0.
    if (!originalImg || typeof originalImg.naturalWidth === 'undefined' || typeof originalImg.naturalHeight === 'undefined') {
        // console.warn("processImage: originalImg is null, undefined, or not a proper Image object. Returning an empty 0x0 canvas.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    
    const ctx = canvas.getContext('2d');
    if (!ctx) {
        // This should not happen in a standard browser environment for a 2D context.
        // console.error("processImage: Failed to get 2D context. Returning an empty canvas.");
        canvas.width = 0; // Ensure consistent empty canvas on critical failure.
        canvas.height = 0;
        return canvas;
    }

    // Draw the original image onto the canvas.
    // If the image isn't fully loaded, it might draw nothing or a broken icon, 
    // depending on browser and image state.
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // console.error("processImage: Error drawing image to canvas.", e);
        // Return the canvas, which might be blank or partially drawn.
        return canvas;
    }
    
    // If either dimension of the canvas is zero (e.g., image not loaded or is genuinely 0-size),
    // getImageData will throw an error. In this scenario, we can't apply the filter.
    // So, we return the canvas with whatever drawImage managed to put on it.
    if (canvas.width === 0 || canvas.height === 0) {
        // console.warn("processImage: Image has zero width or height. Returning canvas without filter effect.");
        return canvas;
    }

    // Validate and parse the ndFactor.
    // An ND filter reduces light, so factor must be >= 1.
    let factor = parseFloat(ndFactor);
    if (isNaN(factor) || factor < 1) {
        // If factor is invalid (e.g., "abc", 0, or a negative number),
        // set it to 1, which means no darkening effect.
        factor = 1;
    }
    
    // If the factor is 1, it means no darkening effect is applied.
    // The original image is already drawn on the canvas, so we can return it directly.
    if (factor === 1) {
        return canvas;
    }

    // Get the pixel data from the canvas.
    // This can throw an error if the canvas is tainted (e.g. cross-origin image without CORS).
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // console.error("processImage: Failed to getImageData. Canvas might be tainted by cross-origin data.", e);
        // Return the canvas as-is, without the filter effect.
        return canvas;
    }
    
    const data = imageData.data; // data is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Iterate over each pixel in the imageData.
    // Each pixel consists of 4 components: Red, Green, Blue, Alpha.
    for (let i = 0; i < data.length; i += 4) {
        // Reduce the intensity of Red, Green, and Blue components by the ndFactor.
        // Math.round is used to convert the potentially floating-point result to an integer.
        data[i] = Math.round(data[i] / factor);     // Red component
        data[i + 1] = Math.round(data[i + 1] / factor); // Green component
        data[i + 2] = Math.round(data[i + 2] / factor); // Blue component
        // The Alpha component (data[i+3]) remains unchanged to preserve transparency.
    }

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

    return canvas;
}