Image Super Saiyan Filter Effect Enhancer

function processImage(originalImg, brightness = 10, contrast = 1.2, yellowBoost = 60, auraRadius = 10, auraOpacity = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // If image dimensions are invalid, return an empty (but valid) canvas
    if (canvas.width === 0 || canvas.height === 0) {
        return canvas;
    }

    // 1. Draw original image to the main canvas
    // Specify width and height to ensure correct drawing if originalImg has different display size
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 2. Get ImageData for pixel manipulation of the main image
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen if the canvas is tainted (e.g., cross-origin image without CORS)
        console.error("Error getting ImageData (possibly due to tainted canvas):", e);
        // Return the canvas with the original image drawn, as processing cannot continue
        return canvas;
    }
    let data = imageData.data;

    // 3. Main image processing loop (Brightness, Contrast, Yellow Boost)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];
        // Alpha (data[i+3]) is preserved

        // Apply brightness: Additive shift to R, G, B
        r += brightness;
        g += brightness;
        b += brightness;

        // Apply contrast: Scale difference from mid-gray (128)
        // Formula: NewColor = (OldColor - 128) * ContrastFactor + 128
        r = (r - 128) * contrast + 128;
        g = (g - 128) * contrast + 128;
        b = (b - 128) * contrast + 128;

        // Apply yellow boost for "Super Saiyan" effect
        // Increases Red and Green, decreases Blue to shift towards a golden yellow
        r += yellowBoost;
        g += yellowBoost * 0.9; // Slightly less green boost for a more golden (less greenish) yellow
        b -= yellowBoost * 0.7; // Significantly reduce blue

        // Clamp all color channels to the valid 0-255 range
        data[i]   = Math.max(0, Math.min(255, r));
        data[i+1] = Math.max(0, Math.min(255, g));
        data[i+2] = Math.max(0, Math.min(255, b));
    }
    // Put the modified pixel data back onto the main canvas
    ctx.putImageData(imageData, 0, 0);

    // 4. Aura effect (if specified)
    if (auraRadius > 0 && auraOpacity > 0) {
        // Create a temporary canvas for generating the aura's base shape
        const sourceAuraCanvas = document.createElement('canvas');
        sourceAuraCanvas.width = canvas.width;
        sourceAuraCanvas.height = canvas.height;
        const sourceAuraCtx = sourceAuraCanvas.getContext('2d');

        // Draw the already processed image (from main canvas) onto the sourceAuraCanvas
        // This ensures the aura's shape is based on the transformed image, including its alpha channel
        sourceAuraCtx.drawImage(canvas, 0, 0);

        // Modify the sourceAuraCanvas: make all non-transparent pixels a solid "Super Saiyan" yellow/gold color
        let auraSourceImageData;
        try {
            auraSourceImageData = sourceAuraCtx.getImageData(0, 0, sourceAuraCanvas.width, sourceAuraCanvas.height);
        } catch (e) {
             console.error("Error getting ImageData for aura source (tainted canvas):", e);
             return canvas; // If fails, abort aura effect and return the processed image
        }
        let auraSourceData = auraSourceImageData.data;

        for (let i = 0; i < auraSourceData.length; i += 4) {
            if (auraSourceData[i+3] > 0) { // Only affect pixels that are not fully transparent
                auraSourceData[i]   = 255;    // Red component of aura color
                auraSourceData[i+1] = 220;    // Green component (for a golden yellow)
                auraSourceData[i+2] = 50;     // Blue component (adds a slight orange tint, reduces pure yellow)
                // The alpha channel (auraSourceData[i+3]) is preserved from the processed image,
                // so the aura respects the original image's transparency mask.
            }
        }
        sourceAuraCtx.putImageData(auraSourceImageData, 0, 0); // sourceAuraCanvas now has the yellow shape

        // Create another temporary canvas for the blurred version of the aura
        const blurredAuraCanvas = document.createElement('canvas');
        blurredAuraCanvas.width = canvas.width;
        blurredAuraCanvas.height = canvas.height;
        const blurredAuraCtx = blurredAuraCanvas.getContext('2d');
        
        // Apply blur filter. The filter is applied when drawing sourceAuraCanvas into blurredAuraCtx.
        if (auraRadius > 0) { // Redundant check as outer if covers it, but safe
             blurredAuraCtx.filter = `blur(${auraRadius}px)`;
        }
       
        // Draw the solid yellow shape (from sourceAuraCanvas) into blurredAuraCtx.
        // The active filter on blurredAuraCtx will apply the blur.
        blurredAuraCtx.drawImage(sourceAuraCanvas, 0, 0);
        // No need to reset filter on blurredAuraCtx, as this canvas is temporary for this drawing.

        // Composite the blurred aura onto the main canvas (ctx)
        ctx.globalAlpha = auraOpacity; // Set opacity for the aura layer
        ctx.globalCompositeOperation = 'lighter'; // Additive blending for a characteristic glow effect
        ctx.drawImage(blurredAuraCanvas, 0, 0);

        // Reset global canvas settings on the main context to defaults
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }

    return canvas; // Return the main canvas with all effects applied
}