Photo Radioactive Glow Filter Effect Tool

function processImage(originalImg, glowColorStr = "50,255,50", intensity = 0.7, blurRadius = 15, brightnessThreshold = 128) {
    // Ensure originalImg is valid and has dimensions
    if (!originalImg || typeof originalImg.width !== 'number' || originalImg.width === 0 || typeof originalImg.height !== 'number' || originalImg.height === 0) {
        console.error("Original image is not valid, not loaded, or has zero dimensions.");
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = 100; // Default small size
        fallbackCanvas.height = 100;
        const fCtx = fallbackCanvas.getContext('2d');
        if (fCtx) {
             fCtx.fillStyle = '#7f7f7f'; // Gray
             fCtx.fillRect(0,0,100,100);
             fCtx.fillStyle = 'white';
             fCtx.textAlign = 'center';
             fCtx.font = '16px Arial';
             fCtx.fillText("Error: Image", 50, 45);
             fCtx.fillText("invalid", 50, 65);
        }
        return fallbackCanvas;
    }

    const W = originalImg.width;
    const H = originalImg.height;

    // 1. Parameter sanitization
    // Intensity controls the opacity of the glow layer, clamped to [0, 1]
    const safeIntensity = Math.max(0, Math.min(1.0, parseFloat(intensity)));
    // Blur radius for the glow effect, must be non-negative
    const safeBlurRadius = Math.max(0, parseInt(blurRadius, 10));
    // Brightness threshold (0-255) to determine what parts of the image glow
    const safeBrightnessThreshold = Math.max(0, Math.min(255, parseInt(brightnessThreshold, 10)));

    // Parse glowColorStr (e.g., "R,G,B")
    let [rStr, gStr, bStr] = glowColorStr.split(',');
    let glowR = parseInt(rStr, 10);
    let glowG = parseInt(gStr, 10);
    let glowB = parseInt(bStr, 10);

    // Default color components if parsing fails or components are missing
    glowR = isNaN(glowR) ? 50 : glowR;   // Default R: 50
    glowG = isNaN(glowG) ? 255 : glowG; // Default G: 255 (bright green)
    glowB = isNaN(glowB) ? 50 : glowB;   // Default B: 50

    // Clamp color components to [0, 255]
    glowR = Math.max(0, Math.min(255, glowR));
    glowG = Math.max(0, Math.min(255, glowG));
    glowB = Math.max(0, Math.min(255, glowB));

    // 2. Main canvas setup (this will be the returned canvas)
    const mainCanvas = document.createElement('canvas');
    mainCanvas.width = W;
    mainCanvas.height = H;
    const mainCtx = mainCanvas.getContext('2d');
    if (!mainCtx) {
      console.error("Could not get 2D context for main canvas.");
      // Return an empty canvas or simple error indicator if context fails
      mainCanvas.width = W || 100; mainCanvas.height = H || 100; // Ensure some size
      return mainCanvas; 
    }
    // Draw the original image onto the main canvas
    mainCtx.drawImage(originalImg, 0, 0, W, H);

    // 3. Glow layer canvas setup (for extracting and blurring glow areas)
    const glowLayerCanvas = document.createElement('canvas');
    glowLayerCanvas.width = W;
    glowLayerCanvas.height = H;
    const glowLayerCtx = glowLayerCanvas.getContext('2d');
    if (!glowLayerCtx) { 
      console.error("Could not get 2D context for glow layer canvas.");
      return mainCanvas; // Return mainCanvas with only the original image
    }

    // 4. Extract "hotspots" (bright areas) to glowLayerCanvas
    // First, draw the original image onto the glow layer canvas to access its pixel data
    glowLayerCtx.drawImage(originalImg, 0, 0, W, H);
    
    let imageData;
    try {
        imageData = glowLayerCtx.getImageData(0, 0, W, H);
    } catch (e) {
        console.error("Could not get image data (possibly due to CORS tainting):", e);
        // If getImageData fails, we can't proceed with pixel manipulation.
        // Return the mainCanvas, which currently holds the original image.
        return mainCanvas;
    }
    
    const data = imageData.data; // Pixel data: [R,G,B,A, R,G,B,A, ...]

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];
        // const a = data[i+3]; // Original alpha, not directly used for luminance calculation

        // Calculate luminance (perceived brightness) using standard coefficients
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        if (luminance > safeBrightnessThreshold) {
            // This pixel is bright enough to contribute to the glow: set it to glowColor
            data[i] = glowR;
            data[i+1] = glowG;
            data[i+2] = glowB;
            data[i+3] = 255; // Full alpha for the glow hotspot
        } else {
            // This pixel does not contribute significantly: make it transparent black
            data[i] = 0;
            data[i+1] = 0;
            data[i+2] = 0;
            data[i+3] = 0; 
        }
    }
    // Put the modified pixel data (now representing glow areas) back to the glowLayerCanvas
    glowLayerCtx.putImageData(imageData, 0, 0);

    // 5. Blur the glowLayerCanvas to create the soft glow effect
    if (safeBlurRadius > 0) {
        // Using a temporary canvas for blurring is safer than drawing a canvas onto itself with a filter,
        // especially for complex filters or very large canvases.
        const tempBlurCanvas = document.createElement('canvas');
        tempBlurCanvas.width = W;
        tempBlurCanvas.height = H;
        const tempBlurCtx = tempBlurCanvas.getContext('2d');

        if (!tempBlurCtx) {
            console.error("Could not get 2D context for temporary blur canvas. Skipping blur.");
        } else {
            tempBlurCtx.filter = `blur(${safeBlurRadius}px)`;
            tempBlurCtx.drawImage(glowLayerCanvas, 0, 0); // Draw hotspots from glowLayerCanvas to tempBlurCanvas, applying blur
            
            // Clear glowLayerCanvas and draw the blurred result from tempBlurCanvas back to it
            glowLayerCtx.clearRect(0, 0, W, H);
            glowLayerCtx.drawImage(tempBlurCanvas, 0, 0);
        }
        // No need to reset filter on tempBlurCtx as it's temporary.
        // glowLayerCtx filter remains 'none'.
    }

    // 6. Composite the blurred glowLayerCanvas onto the mainCanvas
    mainCtx.globalAlpha = safeIntensity; // Set opacity for the glow effect
    mainCtx.globalCompositeOperation = 'lighter'; // 'lighter' (or 'screen') adds colors, good for glows
    mainCtx.drawImage(glowLayerCanvas, 0, 0); // Draw the glow layer onto the main image

    // Reset globalAlpha and globalCompositeOperation to defaults for any subsequent drawing by the caller
    mainCtx.globalAlpha = 1.0;
    mainCtx.globalCompositeOperation = 'source-over';

    // 7. Return the mainCanvas with the radioactive glow effect applied
    return mainCanvas;
}