Photo Calm Morning Filter

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure canvas dimensions match the image
    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get the image data from the canvas
    // This can throw a security error if the image is cross-origin and the canvas is tainted.
    // Assuming the image is from a same-origin source or has CORS headers.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting ImageData:", e);
        // Fallback: return the original image drawn on a canvas if processing fails
        // Or, could return an error indicator / throw. For now, return canvas with original.
        // Alternatively, if originalImg is an HTMLImageElement, it might not be displayable directly
        // as a return type unless specifically allowed. Canvas is preferred.
        // The prompt asks for a canvas return type.
        // If getImageData fails, the canvas contains the original image.
        // This might be acceptable or one might want to return null or throw.
        // For this exercise, we proceed assuming it works, or return the canvas as-is.
        // A simple an empty canvas or a canvas with an error message might be better than returning the original
        // if the filter cannot be applied.
        // Let's assume getImageData succeeds for typical use cases.
        return canvas; // Returns canvas with original image if getImageData fails
    }
    
    const data = imageData.data;

    // "Calm Morning" filter parameters (fine-tuned for the effect)
    const brightnessAdjustment = 10; // Increases overall lightness slightly (0-50 is a good range)
    const contrastFactor = 0.9;      // Reduces contrast for a softer, hazy look (0.0-2.0, 1.0 is no change)
    
    // Warm tint color (a light, warm yellow/orange)
    const tintR = 255;
    const tintG = 215; // Adjusted for a nice morning yellow-orange
    const tintB = 190; // Lower blue component enhances warmth
    const tintStrength = 0.1; // How strongly the tint color is applied (0.0 to 1.0)

    const saturationFactor = 0.9; // Reduces saturation slightly for a calmer feel (0.0-2.0, 1.0 is no change)

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved

        // 1. Apply Brightness Adjustment
        r += brightnessAdjustment;
        g += brightnessAdjustment;
        b += brightnessAdjustment;
        // Clamp values to 0-255 range after brightness
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 2. Apply Contrast Adjustment
        // Pixels are scaled relative to mid-gray (128)
        r = (r - 128) * contrastFactor + 128;
        g = (g - 128) * contrastFactor + 128;
        b = (b - 128) * contrastFactor + 128;
        // Clamp values after contrast
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 3. Apply Warm Tint
        // Blend current pixel color with the tint color using tintStrength as alpha
        r = r * (1 - tintStrength) + tintR * tintStrength;
        g = g * (1 - tintStrength) + tintG * tintStrength;
        b = b * (1 - tintStrength) + tintB * tintStrength;
        // Clamp values after tint
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));
        
        // 4. Apply Saturation Adjustment
        // Calculate luminance (perceived brightness) using standard coefficients
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
        // Adjust saturation by interpolating between luminance (grayscale) and current color
        r = luminance + saturationFactor * (r - luminance);
        g = luminance + saturationFactor * (g - luminance);
        b = luminance + saturationFactor * (b - luminance);
        
        // Final
        // Clamp values to ensure they are within the 0-255 range and round to integers
        data[i] = Math.round(Math.max(0, Math.min(255, r)));
        data[i + 1] = Math.round(Math.max(0, Math.min(255, g)));
        data[i + 2] = Math.round(Math.max(0, Math.min(255, b)));
    }

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

    // Return the canvas with the applied filter
    return canvas;
}