Image Text And Emoji Styler

async function processImage(originalImg, textAndEmojis = 'Татьяна от😺🎇🎼', font = 'Pacifico', fontSize = 80, textColor = '#FFFFFF', strokeColor = '#000000', strokeWidth = 5) {
    /**
     * Dynamically loads a font from Google Fonts if it's not a standard web-safe font.
     * Caches loaded fonts to avoid redundant network requests.
     * @param {string} fontName - The name of the font to load.
     */
    const loadFontIfNeeded = async (fontName) => {
        // A simple set to track loaded fonts to avoid re-adding link tags and awaiting repeatedly.
        if (!window.loadedFonts) {
            window.loadedFonts = new Set();
        }

        const webSafeFonts = new Set([
            'Arial', 'Verdana', 'Helvetica', 'Times New Roman', 'Courier New', 'Georgia', 'serif', 'sans-serif', 'monospace'
        ]);

        if (!webSafeFonts.has(fontName) && !window.loadedFonts.has(fontName)) {
            const fontUrlName = fontName.split(' ').join('+');
            const link = document.createElement('link');
            link.href = `https://fonts.googleapis.com/css2?family=${fontUrlName}&display=swap`;
            link.rel = 'stylesheet';
            document.head.appendChild(link);

            try {
                // Wait for the font to be ready for use.
                await document.fonts.load(`1em "${fontName}"`);
                window.loadedFonts.add(fontName);
            } catch (e) {
                console.error(`Could not load font: ${fontName}`, e);
                // Fallback to a web-safe font if loading fails.
                font = 'Arial';
            }
        }
    };

    // Wait for the custom font to load before proceeding.
    await loadFontIfNeeded(font);

    // Create a canvas element.
    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;

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

    // --- Text Styling and Drawing ---
    
    // Set initial font style to measure the text.
    ctx.font = `${fontSize}px "${font}"`;

    // Automatically adjust font size if the text is wider than 90% of the image.
    const maxWidth = canvas.width * 0.9;
    let textMetrics = ctx.measureText(textAndEmojis);
    let adjustedFontSize = fontSize;

    if (textMetrics.width > maxWidth) {
        adjustedFontSize = Math.floor(fontSize * (maxWidth / textMetrics.width));
    }
    
    // Apply the final, potentially adjusted, font size.
    ctx.font = `${adjustedFontSize}px "${font}"`;

    // Set text alignment and style properties.
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;

    // Center the text horizontally and vertically.
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    // Draw the text outline first for a crisp "sticker" effect.
    if (strokeWidth > 0) {
      ctx.strokeText(textAndEmojis, x, y);
    }
    
    // Draw the filled text on top of the outline.
    ctx.fillText(textAndEmojis, x, y);

    // Return the completed canvas element.
    return canvas;
}