Fairy Image Generator

function processImage(originalImg, glowIntensity = 0.6, sparklesCount = 40, magicTint = 'rgba(255, 150, 255, 0.15)') {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    // Set canvas dimensions to match the original image
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');

    // 1. Draw the original image normally
    ctx.drawImage(originalImg, 0, 0);

    // 2. Add an Ethereal Bloom (Soft Glow) Effect
    // By drawing the image over itself with 'screen' and a blur filter
    ctx.globalCompositeOperation = 'screen';
    // Dynamically calculate blur based on image size for consistent results
    const blurAmount = Math.max(width, height) * 0.015; 
    ctx.filter = `blur(${blurAmount}px)`;
    ctx.globalAlpha = Number(glowIntensity);
    ctx.drawImage(originalImg, 0, 0);
    
    // Reset filter for next steps
    ctx.filter = 'none';

    // 3. Apply a fairy-like magical color tint
    ctx.globalCompositeOperation = 'overlay'; 
    ctx.fillStyle = magicTint;
    ctx.globalAlpha = 1.0;
    ctx.fillRect(0, 0, width, height);

    // 4. Draw Bokeh / Fairy Dust (Glowing floating orbs)
    ctx.globalCompositeOperation = 'screen';
    const orbsCount = Number(sparklesCount) * 1.5;
    for (let i = 0; i < orbsCount; i++) {
        const x = Math.random() * width;
        const y = Math.random() * height;
        const radius = Math.random() * (width * 0.04) + (width * 0.005);
        
        const orbGrad = ctx.createRadialGradient(x, y, 0, x, y, radius);
        orbGrad.addColorStop(0, 'rgba(255, 255, 255, 0.7)');
        orbGrad.addColorStop(0.3, 'rgba(255, 220, 250, 0.3)');
        orbGrad.addColorStop(1, 'rgba(255, 220, 250, 0)');

        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = orbGrad;
        ctx.fill();
    }

    // 5. Draw Magical Sparkles/Stars
    function drawSparkle(cx, cy, size) {
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(Math.random() * Math.PI); // Random rotation for variation

        // Sparkle glow gradient
        const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, size * 1.5);
        grad.addColorStop(0, 'rgba(255, 255, 255, 1)');
        grad.addColorStop(0.1, 'rgba(255, 255, 255, 0.8)');
        grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
        
        ctx.fillStyle = grad;
        
        // Draw 4-point star (cross)
        ctx.beginPath();
        ctx.moveTo(0, -size);
        ctx.quadraticCurveTo(0, 0, size / 3, 0);
        ctx.quadraticCurveTo(0, 0, 0, size);
        ctx.quadraticCurveTo(0, 0, -size / 3, 0);
        ctx.quadraticCurveTo(0, 0, 0, -size);
        ctx.fill();
        
        // Overlay a second thinner, longer star for extra sparkle
        ctx.beginPath();
        ctx.moveTo(0, -size * 1.5);
        ctx.quadraticCurveTo(0, 0, size / 8, 0);
        ctx.quadraticCurveTo(0, 0, 0, size * 1.5);
        ctx.quadraticCurveTo(0, 0, -size / 8, 0);
        ctx.quadraticCurveTo(0, 0, 0, -size * 1.5);
        ctx.fill();

        // Draw a tiny bright core
        ctx.beginPath();
        ctx.arc(0, 0, size / 10, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        ctx.fill();

        ctx.restore();
    }

    for (let i = 0; i < sparklesCount; i++) {
        const x = Math.random() * width;
        const y = Math.random() * height;
        // Vary sparkle sizes dynamically based on original image size
        const size = Math.random() * (Math.max(width, height) * 0.04) + (Math.max(width, height) * 0.01);
        drawSparkle(x, y, size);
    }

    // Reset context state
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    return canvas;
}