Image Practical Magic Tool

function processImage(originalImg, intensity = 50, sparkles = 1, sparkleColor = '#FFD700') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;

    canvas.width = width;
    canvas.height = height;

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

    // Parse parameters
    let magIntensity = Math.min(Math.max(Number(intensity), 0), 100) / 100;
    let enableSparkles = Number(sparkles) === 1;

    // 1. Magical Bloom / Glow Effect (Soft Focus)
    if (magIntensity > 0) {
        const bloomCanvas = document.createElement('canvas');
        bloomCanvas.width = width;
        bloomCanvas.height = height;
        const bCtx = bloomCanvas.getContext('2d');
        
        // Calculate blur radius relative to image size
        let blurRadius = Math.max(width, height) * 0.015;
        bCtx.filter = `blur(${blurRadius}px) contrast(1.2) saturate(1.5)`;
        bCtx.drawImage(originalImg, 0, 0);

        // Apply bloom with 'screen' blend mode
        ctx.globalAlpha = magIntensity * 0.6; // Max 60% opacity for the glow
        ctx.globalCompositeOperation = 'screen';
        ctx.drawImage(bloomCanvas, 0, 0);
    }

    // 2. Mystical Twilight/Autumn Color Grading Overlay
    if (magIntensity > 0) {
        ctx.globalAlpha = magIntensity * 0.4;
        ctx.globalCompositeOperation = 'soft-light';
        
        // Create a subtle gradient from deep mystical purple to a warm golden/orange
        const gradient = ctx.createLinearGradient(0, 0, 0, height);
        gradient.addColorStop(0, '#5D3A9B'); 
        gradient.addColorStop(1, '#E67E22'); 
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

    // 3. Vignette to focus the magic towards the center
    if (magIntensity > 0) {
        ctx.globalAlpha = magIntensity * 0.5;
        ctx.globalCompositeOperation = 'multiply';
        
        const vignette = ctx.createRadialGradient(
            width / 2, height / 2, Math.max(width, height) * 0.2, 
            width / 2, height / 2, Math.max(width, height) * 0.8
        );
        vignette.addColorStop(0, 'rgba(0,0,0,0)');
        vignette.addColorStop(1, 'rgba(0,0,0,0.8)');
        ctx.fillStyle = vignette;
        ctx.fillRect(0, 0, width, height);
    }

    // Reset compositing for normal drawing
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 4. Add Magical Sparkles
    if (enableSparkles && magIntensity > 0) {
        // A simple pseudo-random number generator (PRNG) based on image dimensions
        // to maintain consistent sparkle layout on re-renders for the same image.
        let seed = width * height;
        function seededRandom() {
            let x = Math.sin(seed++) * 10000;
            return x - Math.floor(x);
        }

        // Determine particle count based on canvas area
        let numSparkles = Math.floor((width * height) / 20000); 
        numSparkles = Math.min(Math.max(numSparkles, 10), 100); // Between 10 and 100 sparkles
        
        for (let i = 0; i < numSparkles; i++) {
            let x = seededRandom() * width;
            let y = seededRandom() * height;
            let size = seededRandom() * (Math.max(width, height) * 0.02) + 2; 
            let opacity = seededRandom() * 0.6 + 0.4; // between 0.4 and 1.0

            drawSparkle(ctx, x, y, size, sparkleColor, opacity, magIntensity);
        }
    }

    return canvas;

    // Helper to draw a single 4-point magical sparkle
    function drawSparkle(ctx, x, y, size, color, opacity, effectIntensity) {
        ctx.save();
        ctx.translate(x, y);
        ctx.globalAlpha = opacity * effectIntensity;
        
        // Add a glowing shadow
        ctx.shadowBlur = size * 1.5;
        ctx.shadowColor = color;
        ctx.fillStyle = '#ffffff';

        ctx.beginPath();
        // Draw the 4-pointed star curve
        for (let i = 0; i < 4; i++) {
            ctx.rotate(Math.PI / 2);
            ctx.moveTo(0, 0);
            ctx.quadraticCurveTo(size * 0.15, size * 0.15, size, 0);
            ctx.quadraticCurveTo(size * 0.15, -size * 0.15, 0, 0);
        }
        ctx.fill();
        
        // Draw a tiny bright core
        ctx.beginPath();
        ctx.arc(0, 0, size * 0.15, 0, Math.PI * 2);
        ctx.fillStyle = '#ffffff';
        ctx.fill();
        
        ctx.restore();
    }
}