First Ball Photo Editor

function processImage(originalImg, warmToneOpacity = 0.3, dreamyGlowOpacity = 0.45, vignetteOpacity = 0.7) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

    // 2. Add Warm Elegance (Chandelier / Candle light hue typical for a "First Ball")
    // "soft-light" blend mode naturally enhances contrast and adds rich color without destroying details
    ctx.fillStyle = `rgba(255, 170, 80, ${warmToneOpacity})`;
    ctx.globalCompositeOperation = 'soft-light';
    ctx.fillRect(0, 0, width, height);
    
    // Reset composite operation
    ctx.globalCompositeOperation = 'source-over';

    // 3. Create a Dreamy Soft Glow (Orton-like effect)
    // We blur the current warmed canvas, then screen it over the original to create an ethereal look
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = width;
    blurCanvas.height = height;
    const blurCtx = blurCanvas.getContext('2d');
    
    // Calculate a dynamic blur radius based on image size
    const blurRadius = Math.max(width, height) * 0.015;
    blurCtx.filter = `blur(${blurRadius}px)`;
    blurCtx.drawImage(canvas, 0, 0);

    ctx.globalAlpha = dreamyGlowOpacity;
    ctx.globalCompositeOperation = 'screen';
    ctx.drawImage(blurCanvas, 0, 0);

    // Reset alpha and blend mode
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';

    // 4. Add Vignette (draws romantic focus to the center of the image)
    const gradient = ctx.createRadialGradient(
        width / 2, height / 2, Math.min(width, height) * 0.2, // Inner clear area
        width / 2, height / 2, Math.max(width, height) * 0.75 // Outer dark area
    );
    gradient.addColorStop(0, 'rgba(15, 5, 0, 0)');
    gradient.addColorStop(0.5, `rgba(15, 5, 0, ${vignetteOpacity * 0.3})`);
    gradient.addColorStop(1, `rgba(15, 5, 0, ${vignetteOpacity})`);

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 5. Add a subtle cinematic letterbox gradient (darkens strictly top and bottom edges)
    const linearGradient = ctx.createLinearGradient(0, 0, 0, height);
    linearGradient.addColorStop(0, `rgba(0, 0, 0, ${vignetteOpacity * 0.4})`);
    linearGradient.addColorStop(0.15, 'rgba(0, 0, 0, 0)');
    linearGradient.addColorStop(0.85, 'rgba(0, 0, 0, 0)');
    linearGradient.addColorStop(1, `rgba(0, 0, 0, ${vignetteOpacity * 0.6})`);
    
    ctx.fillStyle = linearGradient;
    ctx.fillRect(0, 0, width, height);

    return canvas;
}