Image Caption Generator For Children’s Expressions

/**
 * Adds a caption to an image, designed to look like a meme or a caption for a child's photo.
 * It automatically loads a playful Google Font that supports Cyrillic characters.
 *
 * @param {Image} originalImg - The original JavaScript Image object.
 * @param {string} captionText - The text of the caption to add.
 * @param {string} fontColor - The color of the text (e.g., '#FFFFFF').
 * @param {number} fontSize - The font size in pixels. This is a base size and will be scaled slightly based on image width.
 * @param {string} fontFamily - The font family to use. Must be a Google Font or a web-safe font.
 * @param {string} position - The vertical position of the caption. Can be 'top', 'bottom', or 'center'.
 * @returns {Promise<HTMLCanvasElement>} A Promise that resolves with a canvas element containing the captioned image.
 */
async function processImage(
    originalImg,
    captionText = "Не хочу в садик!",
    fontColor = "#FFFFFF",
    fontSize = 48,
    fontFamily = "Caveat",
    position = "bottom"
) {
    // Dynamically load the Google Font ('Caveat' is playful and supports Cyrillic)
    try {
        const fontCheck = `1em ${fontFamily}`;
        if (!document.fonts.check(fontCheck)) {
            // Using the Google Fonts API URL for 'Caveat'
            const fontUrl = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}&display=swap`;
            const styleSheet = new CSSStyleSheet();
            const response = await fetch(fontUrl);
            const css = await response.text();
            styleSheet.replaceSync(css);
            document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
            await document.fonts.ready;
        }
    } catch (e) {
        console.error(`Font ${fontFamily} could not be loaded. Using a default font.`, e);
        fontFamily = 'sans-serif'; // Fallback font
    }

    // Create a canvas with the same dimensions as the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Set text styling properties
    const finalFontSize = Math.max(12, Math.round(fontSize * (canvas.width / 800))); // Scale font size relative to image width
    ctx.font = `${finalFontSize}px "${fontFamily}", sans-serif`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Add a stroke (outline) for better readability on any background
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = Math.max(1, finalFontSize / 12);

    // --- Text Wrapping Logic ---
    const x = canvas.width / 2;
    const maxWidth = canvas.width * 0.9; // Use 90% of image width for text
    const lineHeight = finalFontSize * 1.2;
    const words = captionText.split(' ');
    let lines = [];
    let currentLine = words[0] || '';

    for (let i = 1; i < words.length; i++) {
        const word = words[i];
        const width = ctx.measureText(currentLine + " " + word).width;
        if (width < maxWidth) {
            currentLine += " " + word;
        } else {
            lines.push(currentLine);
            currentLine = word;
        }
    }
    lines.push(currentLine);

    // --- Vertical Positioning Logic ---
    const textBlockHeight = lines.length * lineHeight;
    const margin = Math.max(10, canvas.height * 0.05); // 5% vertical margin
    let startY;

    switch (position) {
        case 'top':
            // Position the text block at the top
            startY = margin + (lineHeight / 2);
            break;
        case 'center':
            // Center the entire block of text vertically
            startY = (canvas.height / 2) - (textBlockHeight / 2) + (lineHeight / 2);
            break;
        case 'bottom':
        default:
            // Position the text block at the bottom
            startY = canvas.height - margin - textBlockHeight + (lineHeight / 2);
            break;
    }

    // Draw each line of text onto the canvas
    for (let i = 0; i < lines.length; i++) {
        const lineY = startY + (i * lineHeight);
        // Draw the stroke first, then the fill
        ctx.strokeText(lines[i], x, lineY);
        ctx.fillText(lines[i], x, lineY);
    }

    return canvas;
}