Image Name Studio

async function processImage(originalImg, textTop = 'НАЗВАНИЕ', textBottom = 'КИНОСТУДИЯ', textColor = '#fdd835', outlineColor = '#000000', fontFamily = 'Cinzel Decorative', topTextSize = 8, bottomTextSize = 5, arcRadius = 40, yOffset = 55, topTextSpread = 1.3, bottomTextSpread = 0.9) {
    /**
     * Dynamically loads a font from Google Fonts.
     * @param {string} fontName - The name of the font to load.
     * @returns {Promise<void>} - A promise that resolves when the font is loaded or fails.
     */
    const loadFont = async(fontName) => {
        const fontId = 'font-' + fontName.replace(/\s+/g, '-').toLowerCase();
        if (document.getElementById(fontId)) {
            return; // Font already loaded or being loaded
        }

        const link = document.createElement('link');
        link.id = fontId;
        link.rel = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s+/g, '+')}:wght@700&display=swap`;
        document.head.appendChild(link);

        try {
            await document.fonts.load(`bold 12px "${fontName}"`);
        } catch (e) {
            console.error(`Font ${fontName} could not be loaded.`, e);
            // In case of failure, we'll proceed with the browser's default serif/sans-serif.
        }
    };

    // Load the specified font
    let effectiveFontFamily = fontFamily;
    try {
        await loadFont(fontFamily);
    } catch (e) {
        effectiveFontFamily = 'Times New Roman'; // Fallback font
    }


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

    // 2. Set canvas dimensions and draw the background image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    /**
     * Helper function to draw text along an arc.
     * @param {string} text - The text to draw.
     * @param {boolean} isTopArc - True for the top (downward) arc, false for the bottom (upward) arc.
     */
    const drawArchedText = (text, isTopArc) => {
        const sizePercent = isTopArc ? topTextSize : bottomTextSize;
        const spreadRadians = isTopArc ? topTextSpread : bottomTextSpread;

        const fontSize = canvas.width * (sizePercent / 100);
        const radius = canvas.width * (arcRadius / 100);
        const centerX = canvas.width / 2;
        const centerY = canvas.height * (yOffset / 100);

        // Set text styles
        ctx.font = `bold ${fontSize}px "${effectiveFontFamily}", serif`;
        ctx.fillStyle = textColor;
        ctx.strokeStyle = outlineColor;
        ctx.lineWidth = fontSize / 12; // Outline width relative to font size
        ctx.textAlign = 'center';
        ctx.textBaseline = isTopArc ? 'bottom' : 'top';

        // Calculate the starting angle to center the text
        const totalAngle = spreadRadians;
        const anglePerChar = totalAngle / text.length;
        // The angle for the middle of the first character, relative to the top vertical (-PI/2)
        const startAngle = -Math.PI / 2 - totalAngle / 2 + anglePerChar / 2;

        // 3. Draw each character
        for (let i = 0; i < text.length; i++) {
            const char = text[i];
            const charAngle = startAngle + i * anglePerChar;

            ctx.save();
            ctx.translate(centerX, centerY);
            ctx.rotate(charAngle);

            const yPos = isTopArc ? -radius : radius;

            // Draw outline then fill
            ctx.strokeText(char, 0, yPos);
            ctx.fillText(char, 0, yPos);

            ctx.restore();
        }
    };

    // Draw the top and bottom text arcs
    if (textTop && textTop.trim() !== '') {
        drawArchedText(textTop.toUpperCase(), true);
    }
    if (textBottom && textBottom.trim() !== '') {
        drawArchedText(textBottom.toUpperCase(), false);
    }

    return canvas;
}