Dreamy Photo Filter Effect

function processImage(originalImg, blurAmount = 3, brightnessAmount = 1.1, contrastAmount = 0.9, saturationAmount = 0.85, bloomStrength = 0.25, bloomRadius = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        console.warn("Dreamy Photo Filter: Image has zero dimensions. Ensure it's loaded and valid.");
        canvas.width = 1; // Minimal canvas to avoid errors downstream
        canvas.height = 1;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

    // Helper to sanitize numeric parameters, falling back to their defined defaults if parsing fails
    const sanitizeNumericParam = (value, defaultValue, min = -Infinity, max = Infinity) => {
        let num = parseFloat(value);
        // If parsing results in NaN (e.g., for non-numeric strings) or if value is non-finite,
        // fall back to the parameter's original default value.
        if (isNaN(num) || !isFinite(num)) {
            num = defaultValue;
        }
        // Clamp the value to the allowed range (min/max).
        return Math.max(min, Math.min(max, num));
    };

    // Sanitize parameters using their respective defaults from the function signature
    blurAmount       = sanitizeNumericParam(blurAmount, 3, 0);
    brightnessAmount = sanitizeNumericParam(brightnessAmount, 1.1, 0);
    contrastAmount   = sanitizeNumericParam(contrastAmount, 0.9, 0);
    saturationAmount = sanitizeNumericParam(saturationAmount, 0.85, 0);
    bloomStrength    = sanitizeNumericParam(bloomStrength, 0.25, 0, 1); // bloomStrength is opacity, 0-1
    bloomRadius      = sanitizeNumericParam(bloomRadius, 10, 0);

    // 1. Draw the base image with initial adjustments
    // Filters are applied in the order they appear in the string.
    // Desired order: color adjustments (brightness, contrast, saturation), then blur.
    let baseFilterString = '';
    if (brightnessAmount !== 1) baseFilterString += `brightness(${brightnessAmount}) `;
    if (contrastAmount !== 1) baseFilterString += `contrast(${contrastAmount}) `;
    if (saturationAmount !== 1) baseFilterString += `saturate(${saturationAmount}) `;
    if (blurAmount > 0) baseFilterString += `blur(${blurAmount}px) `;
    
    if (baseFilterString.trim() !== '') {
        ctx.filter = baseFilterString.trim();
    }
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    ctx.filter = 'none'; // Reset filter for any subsequent operations

    // 2. Add the bloom/glow layer
    // This layer is based on the original image, made brighter and more blurred,
    // then blended onto the base layer using 'screen' mode.
    if (bloomStrength > 0) {
        ctx.globalCompositeOperation = 'screen'; // 'screen' or 'lighter' are good for glows
        ctx.globalAlpha = bloomStrength;       // Opacity of the bloom layer

        // Construct filter for the bloom layer.
        // It's typically brighter than the base and has its own blur.
        const internalBloomLayerBrightness = 1.4; // Fixed factor to make highlights pop for the bloom effect.
                                                  // This could be a parameter if more control is needed.
        
        let bloomLayerFilterString = `brightness(${internalBloomLayerBrightness}) `;
        if (bloomRadius > 0) {
            bloomLayerFilterString += `blur(${bloomRadius}px)`;
        }
        // If bloomRadius is 0, the bloom layer will be sharp but bright.
        
        ctx.filter = bloomLayerFilterString.trim();
        
        // Draw the original image again; it will be filtered by bloomLayerFilterString
        // and blended due to globalCompositeOperation and globalAlpha.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

        // Reset context properties to defaults
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 1.0;
        ctx.filter = 'none';
    }

    return canvas;
}