Image Flight Theme Editor

async function processImage(originalImg, text = 'ПОЛЕТЕЛИ!', textColor = 'rgba(255, 255, 255, 0.9)', tintColor = 'rgba(30, 60, 110, 0.2)', vignetteStrength = 0.8) {
    /**
     * Dynamically loads a Google Font into the document.
     * Caches the font link to avoid reloading.
     * Uses the modern document.fonts API for reliable loading.
     * @param {string} fontFamily The name of the font family.
     * @returns {Promise<boolean>} A promise that resolves when the font is loaded.
     */
    const loadGoogleFont = async (fontFamily) => {
        const fontName = fontFamily.replace(/\s/g, '+');
        const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName}&display=swap`;
        const fontId = `google-font-${fontName}`;

        if (document.getElementById(fontId)) {
            // Font link is already in the document
            return true;
        }

        try {
            // Use the modern Font Loading API
            await document.fonts.load(`1em "${fontFamily}"`);
            return true;
        } catch (error) {
            // Fallback for older browsers or if the API fails
            console.warn(`Font Loading API failed for ${fontFamily}. Falling back to <link> tag.`, error);
            return new Promise((resolve, reject) => {
                const link = document.createElement('link');
                link.id = fontId;
                link.rel = 'stylesheet';
                link.href = fontUrl;
                link.onload = () => resolve(true);
                link.onerror = () => {
                    console.error(`Failed to load Google Font: ${fontFamily}`);
                    reject(false);
                };
                document.head.appendChild(link);
            });
        }
    };

    // 1. Load the required font for the text overlay
    const FONT_FAMILY = 'Russo One';
    try {
        await loadGoogleFont(FONT_FAMILY);
    } catch {
        // Continue even if font fails, browser will use fallback.
    }

    // 2. Create and configure the canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 4. Apply the color tint overlay
    if (tintColor && tintColor !== 'transparent') {
        ctx.fillStyle = tintColor;
        ctx.fillRect(0, 0, w, h);
    }

    // 5. Apply a vignette effect
    const strength = Math.max(0, Math.min(1, vignetteStrength));
    if (strength > 0) {
        const centerX = w / 2;
        const centerY = h / 2;
        const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
        
        // Start fading the vignette from about 30% from the center
        const innerRadius = outerRadius * 0.3;

        const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${strength})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // 6. Draw the text overlay
    if (text) {
        ctx.save();
        const fontSize = Math.floor(w / 12);
        ctx.font = `${fontSize}px "${FONT_FAMILY}", sans-serif`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        // Add a subtle shadow for better legibility
        ctx.shadowColor = 'rgba(0, 0, 0, 0.75)';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;

        const x = w / 2;
        // Position text 5% from the bottom edge
        const y = h - (h * 0.05);

        ctx.fillText(text.toUpperCase(), x, y);
        ctx.restore();
    }


    // 7. Return the final canvas element
    return canvas;
}