Image Big Adventure Maker

async function processImage(originalImg, text = "БОЛЬШОЕ ПРИКЛЮЧЕНИЕ", textColor = "#FFD700", cinematicIntensity = 1.2, letterboxRatio = 0.12) {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Apply a cinematic color grading
    // Enhancing contrast, saturation and adding a warm/sepia tone to give an epic adventure feel
    const saturateVal = Math.max(1, cinematicIntensity + 0.1);
    ctx.filter = `contrast(${cinematicIntensity}) saturate(${saturateVal}) sepia(0.2)`;
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none';

    // 2. Add an adventurous vignette effect (darkened edges)
    const cx = width / 2;
    const cy = height / 2;
    const maxRadius = Math.max(cx, cy) * 1.5;
    const gradient = ctx.createRadialGradient(cx, cy, Math.min(cx, cy) * 0.4, cx, cy, maxRadius);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)');
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 3. Add cinematic letterboxing (black bars on top and bottom)
    const barHeight = height * letterboxRatio;
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, width, barHeight); // Top bar
    ctx.fillRect(0, height - barHeight, width, barHeight); // Bottom bar

    // 4. Load an epic, bold font (Russo One supports Cyrillic characters)
    const fontName = 'Russo One';
    let fontLoaded = false;
    document.fonts.forEach((font) => {
        if (font.family === fontName || font.family === `"${fontName}"`) {
            fontLoaded = true;
        }
    });

    if (!fontLoaded) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=Russo+One&display=swap`;
        document.head.appendChild(link);
        
        try {
            await document.fonts.load(`10px "${fontName}"`);
        } catch (e) {
            console.warn("Failed to load font, falling back to default.", e);
        }
    }

    // 5. Draw the "Big Adventure" text
    const fontSize = Math.max(12, Math.floor(barHeight * 0.65));
    ctx.font = `${fontSize}px "${fontName}", Impact, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.lineJoin = 'round';
    ctx.miterLimit = 2;

    const textX = width / 2;
    const textY = height - (barHeight / 2) + (fontSize * 0.05);

    // Add shadow for depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = fontSize * 0.1;
    ctx.shadowBlur = fontSize * 0.2;

    // Stroke text for outline
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = Math.max(2, fontSize * 0.06);
    ctx.strokeText(text, textX, textY);

    // Fill text
    ctx.shadowColor = 'transparent'; // Remove shadow during fill
    ctx.fillStyle = textColor;
    ctx.fillText(text, textX, textY);

    return canvas;
}