Image Glimmer Glass Filter Effect Tool

function processImage(originalImg, blurAmount = 5, glowStrength = 0.75, highlightBoost = 1.2, outputBrightness = 1.0, outputContrast = 0.95) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    if (w === 0 || h === 0) {
        // Handle cases where image might not be loaded or has no dimensions
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // 1. Draw the base image
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Prepare and blend the glow layer
    //    The glow layer is derived from the original image,
    //    brightened in its highlights, blurred, and then blended.
    if (glowStrength > 0 && blurAmount >= 0) {
        ctx.save(); // Save current state (includes globalAlpha, globalCompositeOperation, filter)

        ctx.globalAlpha = glowStrength; // Set opacity for the glow layer
        ctx.globalCompositeOperation = 'screen'; // 'screen' or 'lighter' are good for blooms. Screen is often softer.

        // Apply filters for the glow: brighten highlights first, then blur
        // Filters are applied in the order they appear in the string.
        let glowFilters = [];
        if (Math.abs(highlightBoost - 1.0) > 0.001) {
            glowFilters.push(`brightness(${highlightBoost})`);
        }
        if (blurAmount > 0) {
            glowFilters.push(`blur(${blurAmount}px)`);
        }
        
        if (glowFilters.length > 0) {
            ctx.filter = glowFilters.join(' ');
        }

        // Draw the original image again. This drawing operation will be
        // filtered and then blended onto the existing canvas content (the base image).
        ctx.drawImage(originalImg, 0, 0, w, h);

        ctx.restore(); // Restore to previous state (clears filter, globalAlpha, globalCompositeOperation)
    }
    // At this point, `canvas` contains the base image plus the blended glow.

    // 3. Apply final adjustments (overall brightness and contrast) to the composed image
    let finalFilters = [];
    if (Math.abs(outputBrightness - 1.0) > 0.001) {
        finalFilters.push(`brightness(${outputBrightness})`);
    }
    if (Math.abs(outputContrast - 1.0) > 0.001) {
        finalFilters.push(`contrast(${outputContrast})`);
    }

    if (finalFilters.length > 0) {
        // To apply a filter to the entire current canvas content, we need to draw it
        // onto itself (or via a temporary canvas) with the filter active.
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = w;
        tempCanvas.height = h;
        const tempCtx = tempCanvas.getContext('2d');
        
        // Copy current composed image to temp canvas
        tempCtx.drawImage(canvas, 0, 0, w, h);

        // Clear main canvas
        ctx.clearRect(0, 0, w, h);
        
        // Apply final filters
        ctx.filter = finalFilters.join(' ');
        
        // Draw the composed image (from tempCanvas) back to the main canvas, applying filters
        ctx.drawImage(tempCanvas, 0, 0, w, h);
        
        // Reset filter on main context
        ctx.filter = 'none';
    }

    return canvas;
}