Image Golden Hour Effect Enhancer

/**
 * Applies a "golden hour" effect to an image by adjusting its warmth, saturation, and contrast.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} [intensity=0.6] The overall strength of the golden hour effect, ranging from 0 (no effect) to 1 (full effect).
 * @param {number} [warmth=0.5] The amount of warm (yellow/orange) tint to apply, ranging from 0 to 1.
 * @param {number} [saturation=0.2] The amount to increase color saturation, ranging from 0 to 1.
 * @param {number} [contrast=0.1] The amount to increase the contrast, ranging from 0 to 1.
 * @returns {HTMLCanvasElement} A new canvas element with the golden hour effect applied.
 */
function processImage(originalImg, intensity = 0.6, warmth = 0.5, saturation = 0.2, contrast = 0.1) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Sanitize input parameters to be within a 0-1 range
    intensity = Math.max(0, Math.min(1, intensity));
    warmth = Math.max(0, Math.min(1, warmth));
    saturation = Math.max(0, Math.min(1, saturation));
    contrast = Math.max(0, Math.min(1, contrast));

    // Calculate filter values based on parameters.
    // The main "golden hour" warm tone is achieved with sepia.
    // Saturation and contrast are increased slightly to make the image "pop".
    // A small brightness boost simulates a soft glow.
    const sepiaValue = warmth * intensity;
    const saturateValue = 1 + (saturation * intensity);
    const contrastValue = 1 + (contrast * intensity);
    const brightnessValue = 1 + (intensity * 0.05); // Max 5% brightness increase

    // Construct the CSS filter string. The order of filters can affect the final output.
    // Applying sepia first tints the image, then we enhance the new colors.
    const filterString = `sepia(${sepiaValue}) saturate(${saturateValue}) contrast(${contrastValue}) brightness(${brightnessValue})`;

    // Apply the filter to the canvas context
    ctx.filter = filterString;

    // Draw the original image onto the canvas. The filter will be applied during this step.
    ctx.drawImage(originalImg, 0, 0);

    // Return the canvas with the processed image
    return canvas;
}