Image Night Vision Filter

function processImage(originalImg, intensity = 1.0, noiseLevel = 0.0) {
    // originalImg: JavaScript Image object, assumed to be loaded.
    // intensity: number, brightness multiplier for the green channel.
    //            Typical values: 0.5 (dimmer) to 2.0 (brighter). Default is 1.0 (no change relative to grayscale).
    // noiseLevel: number, magnitude of random noise to add to the green channel.
    //             This value represents the maximum deviation (plus or minus) from the base green value.
    //             Typical values: 0 (no noise) to 50 (significant noise). Default is 0.0.

    const canvas = document.createElement('canvas');
    
    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    // These properties provide the actual dimensions of the image.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

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

    // If image dimensions are zero (e.g., image not loaded or invalid),
    // return an empty canvas to avoid errors with drawImage or getImageData.
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

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

    // Get the image data from the canvas.
    // getImageData can throw an error if width or height is 0, but this is handled by the check above.
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel in the image data. Each pixel consists of 4 components: R, G, B, A.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];   // Red component
        const g = data[i+1]; // Green component
        const b = data[i+2]; // Blue component
        // data[i+3] is the Alpha component, which will be preserved.

        // Calculate the grayscale value (luminance) of the pixel.
        // This standard formula gives a human-perceived brightness.
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply the intensity factor to the grayscale value to determine the base green level.
        let greenValue = gray * intensity;

        // Add noise if noiseLevel is specified and greater than 0.
        if (noiseLevel > 0) {
            // Generate a random noise value in the range: [-noiseLevel, +noiseLevel].
            const noise = (Math.random() * 2 - 1) * noiseLevel;
            greenValue += noise;
        }
        
        // Set the new pixel values for the night vision effect:
        // Red channel is set to 0.
        data[i] = 0;
        // Green channel is set to the calculated greenValue.
        // Uint8ClampedArray automatically clamps values to the 0-255 range.
        // Explicit clamping `Math.max(0, Math.min(255, greenValue))` is technically
        // redundant but can be added for clarity if desired.
        data[i+1] = greenValue; 
        // Blue channel is set to 0.
        data[i+2] = 0;
        // Alpha channel (data[i+3]) remains unchanged to preserve any original transparency.
    }

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

    // Return the canvas element with the night vision effect applied.
    return canvas;
}