Image Fairy Light Filter Effect Tool

function processImage(originalImg, 
                      numberOfLights = 75, 
                      lightCoreColorStr = "255,255,240", 
                      glowColorStr = "255,215,100", 
                      minCoreRadius = 1, 
                      maxCoreRadius = 3, 
                      glowBlurAmount = 15, 
                      lightCoreOpacity = 0.95, 
                      glowOpacity = 0.7) {

    // Helper function to parse "R,G,B" string to an array of numbers [R, G, B].
    // Clamps individual color values to the 0-255 range.
    // Handles malformed strings by defaulting problematic components (or all) to 0.
    const parseRgbColorString = (rgbStr) => {
        if (typeof rgbStr !== 'string') {
            // console.warn("Color string parameter is not a string, defaulting to black [0,0,0].");
            return [0, 0, 0]; 
        }
        const parts = rgbStr.split(',');
        if (parts.length !== 3) {
            // console.warn(`Color string "${rgbStr}" is malformed (expected 3 parts), defaulting to black [0,0,0].`);
            return [0, 0, 0]; 
        }
        return parts.map(s => {
            const num = parseInt(s.trim(), 10);
            // If parsing fails (NaN) or number is out of 0-255 range, clamp or default to 0.
            return isNaN(num) ? 0 : Math.max(0, Math.min(255, num));
        });
    };
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine image dimensions, using naturalWidth/Height if available (for loaded images)
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing the original image: ", e);
        // If drawing fails, return the (likely blank) canvas.
        // Further operations would be on an incorrect base.
        return canvas;
    }

    // If no lights are requested, or image has no drawable area, return canvas with just the original image
    if (numberOfLights <= 0 || imgWidth <= 0 || imgHeight <= 0) {
        return canvas;
    }
    
    // Parse color strings into RGB arrays
    const coreRgb = parseRgbColorString(lightCoreColorStr);
    const glowRgb = parseRgbColorString(glowColorStr);

    // Clamp opacity values to the valid range [0, 1]
    const effectiveGlowOpacity = Math.max(0, Math.min(1, glowOpacity));
    const effectiveCoreOpacity = Math.max(0, Math.min(1, lightCoreOpacity));
    
    // Ensure glowBlurAmount is non-negative
    const effectiveGlowBlurAmount = Math.max(0, glowBlurAmount);

    // Configure shadow properties for the glow effect of the lights
    ctx.shadowOffsetX = 0; // No horizontal offset for the shadow
    ctx.shadowOffsetY = 0; // No vertical offset for the shadow
    ctx.shadowBlur = effectiveGlowBlurAmount; // Set the blur radius for the glow
    ctx.shadowColor = `rgba(${glowRgb[0]}, ${glowRgb[1]}, ${glowRgb[2]}, ${effectiveGlowOpacity})`; // Set glow color and opacity

    // Prepare the fill style for the light cores (can be reused in the loop)
    const lightFillStyle = `rgba(${coreRgb[0]}, ${coreRgb[1]}, ${coreRgb[2]}, ${effectiveCoreOpacity})`;

    // Draw the specified number of lights
    for (let i = 0; i < numberOfLights; i++) {
        // Determine the radius for this light, ensuring it's within the given min/max range
        // and at least a very small positive value to be drawable.
        const inputMin = minCoreRadius;
        const inputMax = maxCoreRadius;

        // Ensure individual radius inputs are at least 0.1
        let r1 = Math.max(0.1, inputMin);
        let r2 = Math.max(0.1, inputMax);

        // Determine the actual min and max, handling cases where inputMin > inputMax
        const actualMinRadius = Math.min(r1, r2);
        const actualMaxRadius = Math.max(r1, r2);
        
        let coreRadius = actualMinRadius;
        // Add random variation if max is greater than min
        if (actualMaxRadius > actualMinRadius) {
            coreRadius += Math.random() * (actualMaxRadius - actualMinRadius);
        }
        
        // Pick a random position for the light on the canvas
        const x = Math.random() * imgWidth;
        const y = Math.random() * imgHeight;

        // Draw the light core (the shadow will be applied automatically by the context)
        ctx.beginPath();
        ctx.arc(x, y, coreRadius, 0, Math.PI * 2); // Full circle
        ctx.fillStyle = lightFillStyle;
        ctx.fill();
    }

    // Reset shadow properties to defaults to avoid affecting subsequent drawing operations
    // if this canvas context were to be used further.
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'transparent'; // Or 'rgba(0,0,0,0)'

    return canvas;
}