Image Soft Focus Filter Effect For Nikon Nikkor

async function processImage(originalImg, blurRadius = 5, glowBrightness = 1.1, glowIntensity = 0.5) {
    // Coerce parameters to numbers and validate them
    let numBlurRadius = Number(blurRadius);
    let numGlowBrightness = Number(glowBrightness);
    let numGlowIntensity = Number(glowIntensity);

    // Set to default if parsing failed or value is out of reasonable bounds
    if (isNaN(numBlurRadius) || numBlurRadius < 0) {
        numBlurRadius = 5; // Default blur radius
    }
    // brightness(0) makes the layer black, so ensure glowBrightness is positive
    if (isNaN(numGlowBrightness) || numGlowBrightness < 0) { 
        numGlowBrightness = 1.1; // Default brightness boost (1.0 is no change)
    }
    // glowIntensity for globalAlpha must be between 0.0 and 1.0
    if (isNaN(numGlowIntensity) || numGlowIntensity < 0 || numGlowIntensity > 1) {
        numGlowIntensity = 0.5; // Default blend intensity
    }

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

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

    // Handle cases where image might not be loaded or has no dimensions
    if (width === 0 || height === 0) {
        console.error("Image not loaded or has zero dimensions. Cannot process.");
        // Return a minimal canvas to avoid errors downstream
        canvas.width = 1; 
        canvas.height = 1;
        return canvas;
    }

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

    // 1. Create the effect layer (blurred and brightened version of the original image)
    // This layer will be blended on top of the original.
    const effectCanvas = document.createElement('canvas');
    const effectCtx = effectCanvas.getContext('2d');
    effectCanvas.width = width;
    effectCanvas.height = height;

    // Apply blur and brightness filters when drawing the image onto the effectCanvas.
    // The `filter` property on CanvasRenderingContext2D supports CSS filter syntax.
    // `brightness(1)` or `brightness(100%)` is original brightness.
    effectCtx.filter = `blur(${numBlurRadius}px) brightness(${numGlowBrightness})`;
    effectCtx.drawImage(originalImg, 0, 0, width, height);
    
    // Reset the filter on the effectCanvas context (good practice, though not strictly needed here as it's temporary).
    effectCtx.filter = 'none';

    // 2. Draw the original image onto the main (result) canvas. This is the base layer.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 3. Blend the effect layer onto the main canvas.
    // 'screen' blend mode lightens the base layer by the effect layer's pixel values.
    // This is excellent for creating glow effects, as brighter areas in the effect layer
    // (due to `glowBrightness`) will significantly lighten corresponding areas in the base.
    ctx.globalCompositeOperation = 'screen';
    
    // Set the opacity for drawing the effect layer. This controls the strength of the soft focus/glow effect.
    ctx.globalAlpha = numGlowIntensity;

    ctx.drawImage(effectCanvas, 0, 0, width, height);

    // Reset globalCompositeOperation and globalAlpha to their default values ('source-over' and 1.0 respectively).
    // This is crucial if the context (ctx) is to be used for further drawing operations.
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    return canvas;
}