Image Aura Visualization Filter Effect Tool

function processImage(originalImg, auraColorString = "255,0,255", auraStrength = 20, auraBrightness = 0.8) {
    const canvas = document.createElement('canvas');

    // Ensure originalImg is a valid Image object with positive dimensions
    if (!originalImg || typeof originalImg.width !== 'number' || typeof originalImg.height !== 'number' || originalImg.width <= 0 || originalImg.height <= 0) {
        console.error("Invalid image object or dimensions provided. Ensure the image is loaded and has positive width and height.");
        // Return a minimal canvas to avoid further errors downstream if image is unusable
        canvas.width = 1; 
        canvas.height = 1;
        // Optionally, you could throw an error here or return null
        // depending on how the calling code should handle this.
        // For this function, returning an empty (or minimal) canvas.
        return canvas;
    }
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        // This is highly unlikely for a '2d' context if canvas dimensions are valid,
        // but good practice to acknowledge the possibility.
        console.error("Could not get 2D rendering context from canvas.");
        return canvas; // Return the canvas, though drawing will fail
    }
    
    // Parse and validate auraColorString ("R,G,B")
    const colorParts = String(auraColorString).split(','); // Ensure auraColorString is treated as a string
    
    // Safely parse integer components for R, G, B
    // parseInt will return NaN for unparseable strings (e.g., "abc" or undefined from split)
    const rRaw = parseInt(colorParts[0]?.trim(), 10);
    const gRaw = parseInt(colorParts[1]?.trim(), 10);
    const bRaw = parseInt(colorParts[2]?.trim(), 10);

    // Clamp R, G, B values to 0-255. If NaN, default to 0.
    const r = Number.isNaN(rRaw) ? 0 : Math.min(Math.max(rRaw, 0), 255);
    const g = Number.isNaN(gRaw) ? 0 : Math.min(Math.max(gRaw, 0), 255);
    const b = Number.isNaN(bRaw) ? 0 : Math.min(Math.max(bRaw, 0), 255);

    // Validate auraStrength (for shadowBlur)
    // Must be a non-negative number.
    const strengthInput = Number(auraStrength);
    const finalAuraStrength = Math.max(0, Number.isNaN(strengthInput) ? 0 : strengthInput);

    // Validate auraBrightness (for shadowColor alpha)
    // Must be a number between 0 and 1.
    const brightnessInput = Number(auraBrightness);
    const finalAuraBrightness = Math.min(Math.max(Number.isNaN(brightnessInput) ? 0 : brightnessInput, 0), 1);
    
    // Configure the shadow properties on the canvas context to create the aura effect
    ctx.shadowColor = `rgba(${r}, ${g}, ${b}, ${finalAuraBrightness})`;
    ctx.shadowBlur = finalAuraStrength;
    ctx.shadowOffsetX = 0; // Center the shadow, no horizontal offset
    ctx.shadowOffsetY = 0; // Center the shadow, no vertical offset

    // Step 1: Draw the original image.
    // This action renders the image normally, but ALSO renders its shadow 
    // (the aura) according to the shadowColor, shadowBlur, and shadowOffset settings.
    // The shadow is cast based on the alpha channel of originalImg:
    // - Opaque pixels cast a full-density shadow.
    // - Fully transparent pixels cast no shadow.
    // - Semi-transparent pixels cast a shadow proportional to their alpha.
    ctx.drawImage(originalImg, 0, 0);

    // Step 2: Reset shadow properties.
    // This is crucial so that the next drawing operation does not also have a shadow.
    ctx.shadowColor = 'transparent'; // Makes subsequent shadows invisible
    ctx.shadowBlur = 0;             // Disables blur for subsequent shadows
    // shadowOffsetX and shadowOffsetY are irrelevant if shadowBlur is 0 or shadowColor is transparent.

    // Step 3: Draw the original image again, this time without any shadow.
    // This second draw places a crisp, clean version of the image directly on top 
    // of the image drawn in Step 1. The effect is that the original image content 
    // remains true to its colors and transparency, while the shadow (aura) from 
    // Step 1 remains visible around its edges, appearing as if it's "behind" the image.
    ctx.drawImage(originalImg, 0, 0);

    return canvas;
}