Blissful Photo Filter

function processImage(
    originalImg, 
    brightness = 1.05,        // Example: 1.0 for original, 1.1 for 10% brighter. Values typically 0.0 to N.
    saturation = 1.1,         // Example: 1.0 for original, 1.2 for 20% more saturation. Values typically 0.0 to N.
    sepia = 0.15,             // Example: 0.0 for no sepia, 0.0 to 1.0 for sepia effect. Subtle values (0.1-0.3) add warmth.
    contrast = 0.95,          // Example: 1.0 for original, 0.9 for 10% less contrast (softer). Values typically 0.0 to N.
    overlayColorStr = "255,210,170", // RGB string for overlay color, e.g., "R,G,B". Warm peach/light orange.
    overlayOpacity = 0.15     // Opacity for the color overlay (0.0 to 1.0). Used with 'soft-light' blend.
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions
    // Fallback to width/height if naturalWidth/Height are 0 (e.g. for SVG images or not-yet-loaded)
    canvas.width = originalImg.naturalWidth || originalImg.width || 0;
    canvas.height = originalImg.naturalHeight || originalImg.height || 0;

    if (canvas.width === 0 || canvas.height === 0) {
        // Handle cases where the image might not have loaded or has no dimensions
        console.warn("Image has zero width or height, or is not fully loaded. Returning empty canvas.");
        return canvas;
    }

    // Construct the filter string from parameters
    // CSS filters are powerful and hardware-accelerated in many browsers.
    const filters = [];
    // Only add filters if they differ from non-effect values to keep string short and behavior predictable.
    if (typeof brightness === 'number' && brightness !== 1.0) filters.push(`brightness(${brightness})`);
    if (typeof saturation === 'number' && saturation !== 1.0) filters.push(`saturate(${saturation})`);
    if (typeof sepia === 'number' && sepia !== 0.0) filters.push(`sepia(${sepia})`);
    if (typeof contrast === 'number' && contrast !== 1.0) filters.push(`contrast(${contrast})`);
    
    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

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

    // Reset filter: subsequent operations (like overlay) should not be affected by these image filters
    ctx.filter = 'none'; 

    // Apply color overlay if specified
    if (typeof overlayOpacity === 'number' && overlayOpacity > 0 && overlayOpacity <= 1.0 && typeof overlayColorStr === 'string' && overlayColorStr) {
        // Parse the overlayColorStr (e.g., "255,210,170")
        const colorParts = overlayColorStr.split(',').map(str => Number(str.trim()));
        
        if (colorParts.length === 3 && colorParts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
            const [r_overlay, g_overlay, b_overlay] = colorParts;
            
            // Set the fill color (opaque for blend mode calculations)
            ctx.fillStyle = `rgb(${r_overlay}, ${g_overlay}, ${b_overlay})`;
            
            // Use 'soft-light' for a gentle, integrated color tone. 'overlay' mode is stronger.
            // Other blend modes like 'screen' or 'color-dodge' with a very low opacity might also achieve dreamy effects.
            ctx.globalCompositeOperation = 'soft-light'; 
            
            // Control the intensity of the blended overlay with globalAlpha
            ctx.globalAlpha = overlayOpacity;
            
            // Draw the overlay rectangle
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Reset globalAlpha and globalCompositeOperation to their defaults for subsequent drawing
            ctx.globalAlpha = 1.0;
            ctx.globalCompositeOperation = 'source-over'; 
        } else {
            console.warn("Invalid overlayColorStr format or color values. Expected 'R,G,B' with values 0-255 each (e.g., '255,210,170'). Overlay skipped.");
        }
    }

    return canvas;
}