Photo Green Filter Application

function processImage(originalImg, intensity = 0.5) {
    // 1. Validate intensity parameter
    let validIntensity = parseFloat(intensity); // Allow string input e.g., "0.7"

    // If parsing results in NaN (e.g., for non-numeric strings like "abc"),
    // or if intensity was not provided, use the default value.
    // The default parameter `intensity = 0.5` handles undefined.
    // This explicit check handles cases like `null` or `intensity="foo"`.
    if (isNaN(validIntensity)) {
        validIntensity = 0.5;
    }
    // Clamp intensity to the range [0, 1]
    validIntensity = Math.max(0, Math.min(1, validIntensity));

    // 2. Create canvas and get context
    const canvas = document.createElement('canvas');

    // An `Image` object is an `HTMLImageElement`.
    // Use naturalWidth/naturalHeight for intrinsic dimensions.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

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

    // 3. Draw original image onto the canvas
    // The third and fourth parameters for drawImage (dw, dh) are used to scale if different from canvas width/height.
    // Here, canvas width/height already match image, so they are strictly not needed but good for clarity.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // If intensity is 0, no filtering effect is applied.
    // Return the canvas with the original image.
    if (validIntensity === 0) {
        return canvas;
    }

    // Handle cases where canvas dimensions might be zero (e.g., image not loaded properly, though caller should ensure)
    if (canvas.width === 0 || canvas.height === 0) {
        // Return the empty/small canvas, or potentially throw an error.
        // For robustness, returning the canvas as-is (which might be empty).
        return canvas;
    }

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

    // 5. Define the target green color for the filter
    // These values define the shade of green the image will be tinted towards.
    // A less saturated green can look more natural for a filter.
    const filterR = 40;  // Red component of the green filter color
    const filterG = 160; // Green component of the green filter color
    const filterB = 40;  // Blue component of the green filter color

    const invIntensity = 1 - validIntensity;

    // 6. Iterate through each pixel and apply the green filter
    // This uses linear interpolation: NewColor = OrigColor * (1-intensity) + FilterColor * intensity
    for (let i = 0; i < data.length; i += 4) {
        const rOrig = data[i];     // Original Red
        const gOrig = data[i + 1]; // Original Green
        const bOrig = data[i + 2]; // Original Blue
        // Alpha channel (data[i+3]) is preserved

        // Calculate new RGB values by blending original with filter color
        data[i]   = Math.round(rOrig * invIntensity + filterR * validIntensity);
        data[i + 1] = Math.round(gOrig * invIntensity + filterG * validIntensity);
        data[i + 2] = Math.round(bOrig * invIntensity + filterB * validIntensity);
    }

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

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