Going Major Image Effect Generator

/**
 * Applies a "Going Major" effect to an image.
 * This effect generates an epic, visually ascending look with a radial zoom blur,
 * a warm/golden "Major" color grade (increased saturation, warmth, contrast), 
 * soft bloom/glow, and heroic golden rays. 
 * Ideal for "evolving", "ascending", or epic meme transformations.
 *
 * @param {HTMLImageElement} originalImg - The source image object.
 * @param {number|string} epicLevel - The intensity of the zoom blur (default: 0.15).
 * @param {number|string} warmth - The amount of golden/warm tint to apply (default: 30).
 * @param {number|string} glowIntensity - Opacity of the heavenly bloom (default: 0.6).
 * @param {string} overlayText - Optional meme text to overlay at the bottom (default: "").
 * @returns {HTMLCanvasElement} - The canvas containing the processed effect.
 */
function processImage(originalImg, epicLevel = 0.15, warmth = 30, glowIntensity = 0.6, overlayText = "") {
    epicLevel = parseFloat(epicLevel);
    warmth = parseFloat(warmth);
    glowIntensity = parseFloat(glowIntensity);
    
    const width = originalImg.width;
    const height = originalImg.height;

    // Create main canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Epic Zoom Blur Pass (Action / Ascending Movement)
    if (epicLevel > 0) {
        const blurSteps = 20;
        ctx.globalAlpha = 1 / blurSteps;
        for (let i = 0; i < blurSteps; i++) {
            const scale = 1 + (i / blurSteps) * epicLevel;
            ctx.setTransform(
                scale, 0, 0, scale, 
                width / 2 - (width / 2) * scale, 
                height / 2 - (height / 2) * scale
            );
            ctx.drawImage(originalImg, 0, 0);
        }
        // Reset transform and alpha
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.globalAlpha = 1.0;
    } else {
        ctx.drawImage(originalImg, 0, 0);
    }

    // 2. "Major" Color Grade (Warm, Happy, Saturated, Epic contrast)
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    const contrast = 20; // Boost contrast
    const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
    const satBoost = 1.4; // High saturation

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];

        // Apply warmth (golden hue)
        r += warmth;
        g += warmth * 0.4;
        b -= warmth * 0.8;

        // Apply contrast
        r = factor * (r - 128) + 128;
        g = factor * (g - 128) + 128;
        b = factor * (b - 128) + 128;

        // Apply saturation
        const gray = 0.2989 * r + 0.5870 * g + 0.1140 * b;
        r = gray + satBoost * (r - gray);
        g = gray + satBoost * (g - gray);
        b = gray + satBoost * (b - gray);

        // Clamp values and update
        data[i] = Math.min(255, Math.max(0, r));
        data[i+1] = Math.min(255, Math.max(0, g));
        data[i+2] = Math.min(255, Math.max(0, b));
    }
    ctx.putImageData(imgData, 0, 0);

    // 3. Heavenly Bloom / Glow Pass
    if (glowIntensity > 0) {
        const blurCanvas = document.createElement('canvas');
        blurCanvas.width = width;
        blurCanvas.height = height;
        const bCtx = blurCanvas.getContext('2d');
        
        // Use a CSS blur filter (supported in all modern browsers) to create a bloom buffer
        bCtx.filter = `blur(${Math.max(6, width * 0.03)}px)`;
        bCtx.drawImage(canvas, 0, 0);

        ctx.save();
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = Math.min(1, Math.max(0, glowIntensity));
        ctx.drawImage(blurCanvas, 0, 0);
        ctx.restore();
    }

    // 4. Heroic Ascending Rays Overlay
    ctx.save();
    ctx.translate(width / 2, height / 2);
    const numRays = 30;
    ctx.fillStyle = 'rgba(255, 235, 180, 0.25)'; // Golden warm rays
    ctx.globalCompositeOperation = 'screen';
    
    for (let i = 0; i < numRays; i++) {
        ctx.beginPath();
        ctx.moveTo(0, 0);
        
        const angle1 = (i / numRays) * Math.PI * 2;
        const angle2 = ((i + 0.4) / numRays) * Math.PI * 2; // Rays take up 40% of their angular sector
        const length = Math.sqrt(width * width + height * height);
        
        ctx.lineTo(Math.cos(angle1) * length, Math.sin(angle1) * length);
        ctx.lineTo(Math.cos(angle2) * length, Math.sin(angle2) * length);
        ctx.fill();
    }
    ctx.restore();

    // 5. Optional Epic Overlay Text
    if (overlayText && overlayText.trim().length > 0) {
        ctx.save();
        const fontSize = Math.max(24, Math.floor(height * 0.12));
        
        // Memetic styling
        ctx.font = `bold ${fontSize}px Impact, "Arial Black", sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = 'white';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = Math.max(3, fontSize * 0.06);
        ctx.lineJoin = 'round';
        ctx.shadowColor = 'black';
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowBlur = Math.max(2, fontSize * 0.05);

        const margin = height * 0.04;
        const textX = width / 2;
        const textY = height - margin;
        
        const upperText = overlayText.toUpperCase();
        ctx.strokeText(upperText, textX, textY);
        ctx.fillText(upperText, textX, textY);
        
        ctx.restore();
    }

    return canvas;
}