Image Title Generator

async function processImage(
    originalImg,
    titleText = "КИНО НАЗВАНИЕ",
    fontFamily = "Bebas Neue",
    fontSizeRatio = 0.15,
    fontColor = "#FFFFFF",
    textPosition = "center",
    strokeColor = "#000000",
    strokeWidth = 4,
    shadowColor = "rgba(0, 0, 0, 0.8)",
    shadowBlur = 15,
    shadowOffsetX = 5,
    shadowOffsetY = 5
) {
    /**
     * Dynamically loads a font from a URL if not already available.
     * @param {string} name - The font family name.
     * @param {string} url - The URL of the font file.
     * @returns {Promise<void>}
     */
    async function loadFont(name, url) {
        // Check if the font is already loaded to avoid re-fetching.
        if (document.fonts.check(`12px "${name}"`)) {
            return;
        }
        const font = new FontFace(name, `url(${url})`);
        await font.load();
        document.fonts.add(font);
    }

    // A map of recommended Google Fonts and their URLs. These support Cyrillic.
    const FONT_URLS = {
        'Bebas Neue': 'https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9WdhyzI.woff2',
        'Anton': 'https://fonts.gstatic.com/s/anton/v23/1Ptgg87LROyAm3Kz-C8.woff2',
        'Russo One': 'https://fonts.gstatic.com/s/russoone/v14/Z9XUDmZRWg6M1cH5LzI.woff2'
    };

    // 1. Create a canvas and get its 2D context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 2. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 3. Dynamically load the selected font
    let effectiveFontFamily = fontFamily;
    const fontUrl = FONT_URLS[fontFamily];

    if (fontUrl) {
        try {
            await loadFont(fontFamily, fontUrl);
        } catch (e) {
            console.error(`Could not load font '${fontFamily}'. Falling back to 'Impact'.`, e);
            effectiveFontFamily = 'Impact'; // A common, bold web-safe fallback
        }
    }

    // 4. Set up text rendering properties
    const fontSize = Math.round(canvas.height * fontSizeRatio);
    ctx.font = `bold ${fontSize}px "${effectiveFontFamily}"`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Add a cinematic drop shadow for better readability and style
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = shadowBlur;
    ctx.shadowOffsetX = shadowOffsetX;
    ctx.shadowOffsetY = shadowOffsetY;

    // 5. Implement text wrapping to handle long titles gracefully
    const maxWidth = canvas.width * 0.9; // Max text width is 90% of image width
    const words = titleText.toUpperCase().split(' ');
    let line = '';
    const lines = [];

    for (let n = 0; n < words.length; n++) {
        const testLine = line + words[n] + ' ';
        const metrics = ctx.measureText(testLine);
        if (metrics.width > maxWidth && n > 0) {
            lines.push(line.trim());
            line = words[n] + ' ';
        } else {
            line = testLine;
        }
    }
    lines.push(line.trim());

    // 6. Calculate the vertical starting position for the block of text
    const lineHeight = fontSize * 1.2; // Spacing between lines
    let blockCenterY;

    // Determine the vertical center for the text block based on the `textPosition` parameter
    switch (textPosition.toLowerCase()) {
        case 'top':
            blockCenterY = canvas.height * 0.25;
            break;
        case 'bottom':
            blockCenterY = canvas.height * 0.75;
            break;
        case 'center':
        default:
            blockCenterY = canvas.height / 2;
            break;
    }

    // Calculate the Y coordinate for the first line of text
    const startY = blockCenterY - (lines.length - 1) * lineHeight / 2;

    // 7. Draw the text lines on the canvas
    const x = canvas.width / 2;
    for (let i = 0; i < lines.length; i++) {
        const currentY = startY + (i * lineHeight);
        // Draw outline if a stroke width is specified
        if (strokeWidth > 0) {
            ctx.strokeText(lines[i], x, currentY);
        }
        // Draw the filled text on top of the outline
        ctx.fillText(lines[i], x, currentY);
    }

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