Image Golden Hour Filter Application

function processImage(originalImg, strength = 0.7) {
    // Ensure strength is a number and clamp it to the range [0, 1]
    // Number() will convert string representations of numbers to numeric type.
    // If strength is an unparseable string (e.g., "abc"), Number(strength) is NaN.
    // Operations with NaN usually result in NaN. For pixel data, NaN assigned to Uint8ClampedArray becomes 0.
    let s = Number(strength);
    if (isNaN(s)) {
        // If strength is not a parseable number, revert to the default.
        s = 0.7; 
    }
    s = Math.max(0, Math.min(1, s));

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

    // Use naturalWidth and naturalHeight for the true dimensions of the image,
    // which are available after the image has loaded.
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Handle cases where the image might not be loaded or has no dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        // Set canvas to 0x0 and return it.
        // This can happen if the image object was created but src not set or not loaded.
        canvas.width = 0;
        canvas.height = 0;
        // Optionally, log a warning.
        // console.warn("Image has zero dimensions. Ensure the image is loaded before processing.");
        return canvas;
    }

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

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

    // Get the ImageData object to manipulate pixel data
    // Note: This can throw a security error if the image is cross-origin and canvas is tainted.
    // For a "free online tool", this usually means the image is user-provided or from same origin.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Could not getImageData: ", e);
        // Return the canvas with the original image drawn, if we can't process it.
        // Or throw an error, or return an empty canvas, depending on desired error handling.
        return canvas; 
    }
    
    const data = imageData.data; // data is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Define target factors for the "Golden Hour" effect at full strength (s=1)
    // These factors aim for a warm, orange-yellowish tint.
    const targetFactorR = 1.25; // Increase red component
    const targetFactorG = 1.20; // Increase green component (to make it yellowish with red)
    const targetFactorB = 0.80; // Decrease blue component to enhance warmth

    // Iterate over each pixel in the image data
    // Each pixel consists of 4 values: Red, Green, Blue, Alpha
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Original Red
        const g = data[i + 1]; // Original Green
        const b = data[i + 2]; // Original Blue
        // data[i+3] is Alpha, typically left unchanged for color filter effects

        // Calculate the new color values.
        // The formula applies the strength `s` to interpolate between the original color
        // and the color fully modified by targetFactors.
        // newColor = originalColor * (1 + (targetFactor - 1) * s)
        // which is equivalent to: lerp(originalColor, originalColor * targetFactor, s)
        
        let newR = r * (1 + (targetFactorR - 1) * s);
        let newG = g * (1 + (targetFactorG - 1) * s);
        let newB = b * (1 + (targetFactorB - 1) * s);

        // Assign the new values.
        // Uint8ClampedArray automatically clamps values to the 0-255 range.
        // e.g., data[i] = 300 becomes 255; data[i] = -100 becomes 0; data[i] = NaN becomes 0.
        data[i] = newR;
        data[i + 1] = newG;
        data[i + 2] = newB;
    }

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

    return canvas;
}