Image Golden Hour Sunset Filter Application

function processImage(originalImg, intensity = 0.6) {
    // Ensure intensity is a number and normalize to the range [0, 1]
    let currentIntensity = Number(intensity);
    if (isNaN(currentIntensity) || currentIntensity < 0) {
        currentIntensity = 0; // Apply minimum effect if value is invalid or negative
    } else if (currentIntensity > 1) {
        currentIntensity = 1; // Apply maximum effect if value is greater than 1
    }

    const canvas = document.createElement('canvas');
    
    // Use naturalWidth and naturalHeight for the true dimensions of the image data.
    // These properties provide the intrinsic dimensions of the image.
    // If the image hasn't loaded or is invalid, these might be 0.
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

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

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

    if (!ctx) {
        console.error("Failed to get 2D context from canvas. Your browser may not support it or the context limit might be reached.");
        // Return the canvas, which will be empty but correctly sized if possible.
        return canvas;
    }

    // If image dimensions are zero (e.g. image not loaded or empty image),
    // drawing will not happen or will be a no-op. Return empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Original image has zero width or height. Returning empty canvas.");
        return canvas;
    }
    
    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing image to canvas. The Image object might be invalid or in a broken state.", e);
        // Return the canvas; it might be empty or partially drawn depending on the error.
        return canvas;
    }
    
    // If intensity is effectively 0, no processing is needed.
    // Return the canvas with the original image drawn on it.
    // (Floating point comparison: 0.0 from normalization should be exact)
    if (currentIntensity === 0) {
        return canvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Could not get image data from canvas. This commonly occurs due to CORS (Cross-Origin Resource Sharing) restrictions if the image is loaded from a different domain without permissive CORS headers. The canvas becomes 'tainted'.", e);
        // In case of such an error, the filter cannot be applied.
        // Return the canvas, which contains the original image drawn (but no filter).
        return canvas;
    }
    
    const data = imageData.data;

    // Filter parameters for "Golden Hour Sunset" effect, scaled by currentIntensity.
    // These parameters aim to:
    // - Increase warmth by boosting red and green channels.
    // - Add a slight "glow" or brightness, especially to warmer tones.
    // - Subtly reduce blue tones to enhance the sunset feel.
    const redFactor = 1 + 0.3 * currentIntensity;    // Factor to multiply red channel by
    const redOffset = 30 * currentIntensity;        // Value to add to red channel (brightness/glow)
    const greenFactor = 1 + 0.15 * currentIntensity; // Factor to multiply green channel by
    const greenOffset = 15 * currentIntensity;      // Value to add to green channel (brightness/glow)
    const blueFactor = 1 - 0.25 * currentIntensity; // Factor to multiply blue channel by (reduces blue)

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];   // Red channel
        const g = data[i+1]; // Green channel
        const b = data[i+2]; // Blue channel
        // data[i+3] is the Alpha channel, typically left unchanged for color filters.

        // Apply the calculated transformations
        let newR = r * redFactor + redOffset;
        let newG = g * greenFactor + greenOffset;
        let newB = b * blueFactor;

        // Clamp the new RGB values to the valid 0-255 range
        data[i]   = Math.min(255, Math.max(0, newR));
        data[i+1] = Math.min(255, Math.max(0, newG));
        data[i+2] = Math.min(255, Math.max(0, newB));
    }

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

    return canvas;
}