Image Glow Worm Filter Effect Tool

function processImage(originalImg, glowIntensity = 0.7, blurRadius = 10, glowColorStr = "173,255,47") {
    const W = originalImg.naturalWidth;
    const H = originalImg.naturalHeight;

    if (!W || !H) {
        console.error("Image has zero dimensions or is not fully loaded. Ensure the image is loaded before processing.");
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 1; 
        errorCanvas.height = 1;
        const errCtx = errorCanvas.getContext('2d');
        if (errCtx) {
            errCtx.fillStyle = 'red'; // Draw a small red square to indicate error
            errCtx.fillRect(0,0,1,1);
        }
        return errorCanvas;
    }

    // Validate and parse_parameters
    let parsedGlowIntensity = parseFloat(glowIntensity);
    if (isNaN(parsedGlowIntensity)) {
        parsedGlowIntensity = 0.7; // Default from signature
    }
    parsedGlowIntensity = Math.max(0, Math.min(1, parsedGlowIntensity));

    let parsedBlurRadius = parseFloat(blurRadius);
    if (isNaN(parsedBlurRadius)) {
        parsedBlurRadius = 10; // Default from signature
    }
    parsedBlurRadius = Math.max(0, parsedBlurRadius);
    
    let r = 173, g = 255, b = 47; // Default glow color: chartreuse/lime green (a "glow worm" color)
    if (typeof glowColorStr === 'string') {
        const parts = glowColorStr.split(',').map(s => parseInt(s.trim(), 10));
        if (parts.length === 3 && parts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
            [r, g, b] = parts;
        }
    }
    const finalGlowColorCSS = `rgb(${r},${g},${b})`;

    // Setup canvases
    const mainCanvas = document.createElement('canvas');
    mainCanvas.width = W;
    mainCanvas.height = H;
    const mainCtx = mainCanvas.getContext('2d');

    const glowCanvas = document.createElement('canvas');
    glowCanvas.width = W;
    glowCanvas.height = H;
    const glowCtx = glowCanvas.getContext('2d');

    if (!mainCtx || !glowCtx) {
        console.error("Failed to get 2D context for canvas. This browser may not support canvas fully.");
        // Fallback: try to return original image on a canvas, or a blank canvas
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = W;
        fallbackCanvas.height = H;
        const fbCtx = fallbackCanvas.getContext('2d');
        if (fbCtx) {
            try {
                fbCtx.drawImage(originalImg, 0, 0, W, H);
            } catch (e) {
                console.error("Failed to draw original image on fallback canvas.", e);
            }
        }
        return fallbackCanvas;
    }
    
    // Step 1: Create Blurred Layer (on glowCanvas)
    // This layer will become the basis for the glow.
    if (parsedBlurRadius > 0) {
        glowCtx.filter = `blur(${parsedBlurRadius}px)`;
        glowCtx.drawImage(originalImg, 0, 0, W, H); // Draw image with blur
        glowCtx.filter = 'none'; // Reset filter for subsequent operations on glowCtx
    } else {
        glowCtx.drawImage(originalImg, 0, 0, W, H); // Draw image without blur
    }

    // Step 2: Tint the Blurred Layer (still on glowCanvas)
    // Use 'color' composite mode to apply hue and saturation of finalGlowColorCSS
    // while preserving luminance of the (blurred) image.
    glowCtx.globalCompositeOperation = 'color';
    glowCtx.fillStyle = finalGlowColorCSS;
    glowCtx.fillRect(0, 0, W, H);
    glowCtx.globalCompositeOperation = 'source-over'; // Reset composite operation

    // Step 3: Composite onto mainCanvas
    // First, draw the original image onto the main canvas.
    mainCtx.drawImage(originalImg, 0, 0, W, H);

    // Then, add the glow layer (glowCanvas) on top if intensity is greater than 0.
    if (parsedGlowIntensity > 0) {
        mainCtx.globalAlpha = parsedGlowIntensity;
        // Use 'lighter' composite mode for an additive effect, typical for glows.
        mainCtx.globalCompositeOperation = 'lighter'; 
        mainCtx.drawImage(glowCanvas, 0, 0, W, H);
        
        // Reset mainCtx properties to defaults for subsequent drawing (if any)
        mainCtx.globalAlpha = 1.0;
        mainCtx.globalCompositeOperation = 'source-over';
    }

    return mainCanvas;
}