Image Associated With Cinema Theme

async function processImage(originalImg, text = "Мы родом из кино", textColor = "#FFFFFF", fontSize = 10, sepia = 50, vignette = 70, filmStrip = "true") {
    /**
     * Dynamically loads a Google Font into the document.
     * @param {string} fontName The name of the font to load (e.g., 'Bebas Neue').
     */
    const loadGoogleFont = async (fontName) => {
        const fontId = `google-font-${fontName.replace(/\s+/g, '-')}`;
        if (document.getElementById(fontId)) {
            // Font is already requested, assume it's loading or loaded.
            await document.fonts.load(`1em "${fontName}"`);
            return;
        }

        try {
            const link = document.createElement('link');
            link.id = fontId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s+/g, '+')}&display=swap`;
            document.head.appendChild(link);
            // Wait for the font to be loaded and ready.
            await document.fonts.load(`1em "${fontName}"`);
        } catch (e) {
            console.error(`Could not load Google Font: ${fontName}`, e);
            // Proceed with a default font if loading fails.
        }
    };

    const FONT_NAME = 'Bebas Neue';
    await loadGoogleFont(FONT_NAME);

    const addFilmStrip = String(filmStrip).toLowerCase() === 'true';

    // Calculate dimensions
    // The width of the film strip is proportional to the image height.
    const stripWidth = addFilmStrip ? originalImg.height * 0.12 : 0;
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width + 2 * stripWidth;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

    // 1. Draw black background for the film strips
    if (addFilmStrip) {
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // 2. Apply filters and draw the original image
    // A combination of sepia, contrast, and brightness gives a vintage film look.
    ctx.save();
    ctx.filter = `sepia(${sepia}%) contrast(110%) brightness(95%)`;
    ctx.drawImage(originalImg, stripWidth, 0, originalImg.width, originalImg.height);
    ctx.restore(); // Restore context to remove filter for subsequent drawings

    // 3. Draw film strip sprockets/perforations (if enabled)
    if (addFilmStrip) {
        ctx.fillStyle = '#EAEAEA'; // Off-white for a slightly aged look
        const sprocketHeight = stripWidth * 0.35;
        const sprocketWidth = stripWidth * 0.6;
        const sprocketSpacing = sprocketHeight * 1.5;
        const xOffsetLeft = (stripWidth - sprocketWidth) / 2;
        const xOffsetRight = canvas.width - stripWidth + xOffsetLeft;

        for (let y = sprocketSpacing / 2; y < canvas.height; y += sprocketSpacing) {
            // Left strip sprockets
            ctx.fillRect(xOffsetLeft, y, sprocketWidth, sprocketHeight);
            // Right strip sprockets
            ctx.fillRect(xOffsetRight, y, sprocketWidth, sprocketHeight);
        }
    }

    // 4. Add a vignette effect to darken the corners
    if (vignette > 0 && vignette <= 100) {
        const vignetteStrength = vignette / 100;
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));

        const gradient = ctx.createRadialGradient(centerX, centerY, outerRadius * 0.2, centerX, centerY, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteStrength * 0.9})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    // 5. Draw the text overlay
    if (text) {
        // Font size is relative to the image height.
        const finalFontSize = Math.max(12, canvas.height * (fontSize / 100));
        ctx.font = `${finalFontSize}px "${FONT_NAME}", sans-serif`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        // Add a subtle shadow for better readability on various backgrounds.
        ctx.shadowColor = 'rgba(0,0,0,0.7)';
        ctx.shadowBlur = 5;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;

        const textX = canvas.width / 2;
        // Position text near the bottom of the canvas.
        const textY = canvas.height - (finalFontSize * 0.5);
        ctx.fillText(text.toUpperCase(), textX, textY);
    }

    return canvas;
}