Image Magic Effect Generator

function processImage(originalImg, tintColor = '#8a2be2', intensity = '0.6', sparkleCount = '80') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Draw base image
    ctx.drawImage(originalImg, 0, 0);

    let parsedIntensity = parseFloat(intensity);
    if (isNaN(parsedIntensity)) parsedIntensity = 0.6;
    
    let parsedCount = parseInt(sparkleCount, 10);
    if (isNaN(parsedCount)) parsedCount = 80;

    // 1. Orton Effect (Mystical Glow)
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = w;
    blurCanvas.height = h;
    const blurCtx = blurCanvas.getContext('2d');
    
    // Apply blur and saturation for a dreamy look
    blurCtx.filter = `blur(${Math.max(w, h) * 0.015}px) saturate(140%)`;
    blurCtx.drawImage(originalImg, 0, 0);

    // Screen blend the blurred version to create an aura
    ctx.globalCompositeOperation = 'screen';
    ctx.globalAlpha = parsedIntensity;
    ctx.drawImage(blurCanvas, 0, 0);

    // 2. Color Tint Overlay for magical atmosphere
    ctx.globalCompositeOperation = 'overlay';
    ctx.globalAlpha = parsedIntensity * 0.6;
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, w, h);

    // 3. Dramatic Vignette (Spotlight effect)
    ctx.globalCompositeOperation = 'multiply';
    ctx.globalAlpha = 1.0;
    const gradient = ctx.createRadialGradient(w / 2, h / 2, Math.min(w, h) * 0.2, w / 2, h / 2, Math.max(w, h) * 0.8);
    gradient.addColorStop(0, '#ffffff'); // Center remains lit
    gradient.addColorStop(0.6, '#eeeeee'); // Gradual drop-off
    gradient.addColorStop(1, '#1e0c33'); // Extremely dark & tinted edges
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, w, h);

    // 4. Draw Magic Sparkles and Bokeh Orbs
    ctx.globalCompositeOperation = 'screen';
    
    for (let i = 0; i < parsedCount; i++) {
        const x = Math.random() * w;
        const y = Math.random() * h;
        // Keep elements relatively small compared to image size
        const size = Math.random() * Math.max(w, h) * 0.02 + 2; 
        const opacity = Math.random() * 0.6 + 0.4;
        
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(Math.random() * Math.PI); // Random rotation
        
        const isBokeh = Math.random() > 0.6; // 40% Bokeh, 60% Stars
        
        if (isBokeh) {
            // Magical floating orb / bokeh
            ctx.beginPath();
            ctx.arc(0, 0, size, 0, Math.PI * 2);
            ctx.fillStyle = tintColor;
            ctx.globalAlpha = opacity * 0.5;
            ctx.fill();
            
            // Inner bright core
            ctx.beginPath();
            ctx.arc(0, 0, size * 0.4, 0, Math.PI * 2);
            ctx.fillStyle = '#ffffff';
            ctx.globalAlpha = opacity;
            ctx.fill();
        } else {
            // Ambient lens glow behind the star
            ctx.beginPath();
            ctx.arc(0, 0, size * 0.8, 0, Math.PI * 2);
            ctx.fillStyle = tintColor;
            ctx.globalAlpha = opacity * 0.3;
            ctx.fill();

            // 4-point magic star shape using bezier curves
            ctx.beginPath();
            ctx.moveTo(0, -size);
            ctx.quadraticCurveTo(size * 0.1, -size * 0.1, size, 0);
            ctx.quadraticCurveTo(size * 0.1, size * 0.1, 0, size);
            ctx.quadraticCurveTo(-size * 0.1, size * 0.1, -size, 0);
            ctx.quadraticCurveTo(-size * 0.1, -size * 0.1, 0, -size);
            ctx.fillStyle = '#ffffff';
            ctx.globalAlpha = opacity;
            ctx.fill();
        }
        
        ctx.restore();
    }
    
    // Reset global context parameters
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}