Image Dreamy Soft Glow Filter

function processImage(originalImg, blurAmount = 6, glowIntensity = 0.7, brightnessBoost = 1.1) {
    // Clamp parameters to sensible ranges
    blurAmount = Math.max(0, Number(blurAmount)); // Ensure non-negative
    glowIntensity = Math.max(0, Math.min(1, Number(glowIntensity))); // Clamp between 0 and 1
    brightnessBoost = Math.max(0, Number(brightnessBoost)); // Ensure non-negative

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get image dimensions using naturalWidth/Height for accuracy, fallback to width/height
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

    // If image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas
    if (width === 0 || height === 0) {
        console.warn("Image dimensions are zero. Returning an empty canvas.");
        return canvas;
    }

    // 1. Draw the original image onto the canvas. This serves as the base layer.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // --- Create the glow effect ---
    // The glow effect is achieved by drawing the image again on top of itself,
    // but this second draw is filtered (blurred and brightened) and blended.

    // Save the current context state to restore it later
    const previousCompositeOperation = ctx.globalCompositeOperation;
    const previousAlpha = ctx.globalAlpha;
    const previousFilter = ctx.filter;

    // Set up the context for drawing the glow layer:
    
    // 'lighter' (or 'screen') blending mode creates a glow effect when drawing bright areas
    // on top of existing content. 'lighter' is additive (dest = src + dest).
    ctx.globalCompositeOperation = 'lighter';
    
    // `glowIntensity` controls the opacity of the glow layer.
    ctx.globalAlpha = glowIntensity;
    
    // Apply filters to the source image before drawing it for the glow layer.
    // - `blur()` creates the soft, diffused look.
    // - `brightness()` makes the glow layer itself brighter, enhancing the effect.
    //   The brightness filter value is a percentage (e.g., 110% for brightnessBoost = 1.1).
    ctx.filter = `blur(${blurAmount}px) brightness(${brightnessBoost * 100}%)`;

    // 2. Draw the image again.
    // This time, it will be filtered according to `ctx.filter`,
    // its opacity will be `ctx.globalAlpha`,
    // and it will be blended with the base layer using `ctx.globalCompositeOperation`.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Restore the context state to its previous values
    // This is important to avoid side effects if the canvas context is used further.
    ctx.globalCompositeOperation = previousCompositeOperation; // Typically 'source-over'
    ctx.globalAlpha = previousAlpha;             // Typically 1.0
    ctx.filter = previousFilter;                 // Typically 'none'

    return canvas;
}