Image Morning Light Effect Converter

/**
 * Applies a warm, golden "morning light" effect to an image.
 * This is achieved by adjusting the image's color temperature, saturation,
 * and brightness, and then applying a subtle golden overlay.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [intensity=0.6] The overall strength of the light effect (0 to 1). Affects brightness, contrast, and glow.
 * @param {number} [warmth=0.5] The warmth of the light (0 to 1). Affects the color temperature, making it more yellow/orange.
 * @returns {HTMLCanvasElement} A new canvas element with the morning light effect applied.
 */
function processImage(originalImg, intensity = 0.6, warmth = 0.5) {
    // 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;

    // --- Step 1: Apply core adjustments using CSS filters ---
    // Clamp the input parameters to a safe range [0, 1]
    const clampedIntensity = Math.max(0, Math.min(1, intensity));
    const clampedWarmth = Math.max(0, Math.min(1, warmth));

    // Calculate filter values based on the parameters
    const sepiaValue = clampedWarmth * 0.35; // Adds a yellow-brown tint for warmth
    const saturateValue = 1 + clampedIntensity * 0.4; // Makes colors more vibrant
    const contrastValue = 1 + clampedIntensity * 0.15; // Increases the dynamic range
    const brightnessValue = 1 + clampedIntensity * 0.1; // Brightens the image slightly

    // Apply the filters to the canvas context
    ctx.filter = `sepia(${sepiaValue}) saturate(${saturateValue}) contrast(${contrastValue}) brightness(${brightnessValue})`;

    // Draw the image onto the canvas. The filters will be applied during this operation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // --- Step 2: Add a golden glow overlay ---
    // Reset the filter so it doesn't affect the overlay rectangle
    ctx.filter = 'none';

    // Use 'soft-light' or 'overlay' blending mode for a natural glow effect.
    // 'soft-light' is more subtle, which is often better for this kind of effect.
    ctx.globalCompositeOperation = 'soft-light';

    // Set the fill style to a warm, golden color. The alpha channel is controlled by intensity.
    const glowAlpha = clampedIntensity * 0.25;
    ctx.fillStyle = `rgba(255, 180, 50, ${glowAlpha})`;

    // Draw the overlay rectangle over the entire image
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Reset the composite operation to default for good practice
    ctx.globalCompositeOperation = 'source-over';

    // Return the final canvas
    return canvas;
}