Image Website Title Generator

async function processImage(originalImg, titleText = 'Название веб-сайта', subtitleText = 'Краткое описание вашего сайта', fontFamily = 'Roboto', titleFontSize = 64, subtitleFontSize = 32, textColor = '#ffffff', overlayColor = 'rgba(0, 0, 0, 0.5)') {
    /**
     * Dynamically loads a Google Font stylesheet into the document's head.
     * @param {string} family The font family name.
     */
    const loadFont = async (family) => {
        const fontId = `google-font-${family.replace(/\s+/g, '-')}`;
        if (document.getElementById(fontId)) {
            // Font is already requested, assume it's loading or loaded.
            return;
        }

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

        try {
            // Wait for the font to be ready for use.
            await document.fonts.load(`12px "${family}"`);
            await document.fonts.load(`bold 12px "${family}"`);
        } catch (e) {
            console.error(`Font '${family}' could not be loaded.`, e);
            // In case of an error, we will fall back to a default font later.
            throw new Error(`Font loading failed for ${family}`);
        }
    };

    let effectiveFontFamily = fontFamily;
    try {
        await loadFont(fontFamily);
    } catch (e) {
        // If the specified Google Font fails, fallback to a web-safe font.
        effectiveFontFamily = 'Arial';
    }

    // 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;

    // Handle cases where the image might not have loaded correctly.
    if (canvas.width === 0 || canvas.height === 0) {
        console.error("Invalid image dimensions. The image may not have loaded properly.");
        canvas.width = 600;
        canvas.height = 300;
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#333';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = '16px sans-serif';
        ctx.fillText('Error: Invalid Image Source', canvas.width / 2, canvas.height / 2);
        return canvas;
    }


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

    // Draw a semi-transparent overlay to enhance text readability.
    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Set text styling properties.
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Draw Main Title ---
    // Auto-adjust font size to fit the canvas width.
    let currentTitleFontSize = parseInt(titleFontSize, 10);
    const maxTextWidth = canvas.width * 0.9; // 90% of canvas width
    ctx.font = `bold ${currentTitleFontSize}px "${effectiveFontFamily}", sans-serif`;

    while (ctx.measureText(titleText).width > maxTextWidth && currentTitleFontSize > 10) {
        currentTitleFontSize--;
        ctx.font = `bold ${currentTitleFontSize}px "${effectiveFontFamily}", sans-serif`;
    }
    const titleY = centerY - (currentTitleFontSize / 2);
    ctx.fillText(titleText, centerX, titleY);


    // --- Draw Subtitle ---
    // Auto-adjust font size for subtitle as well.
    let currentSubtitleFontSize = parseInt(subtitleFontSize, 10);
    const maxSubtitleWidth = canvas.width * 0.8; // 80% of canvas width
    ctx.font = `normal ${currentSubtitleFontSize}px "${effectiveFontFamily}", sans-serif`;

    while (ctx.measureText(subtitleText).width > maxSubtitleWidth && currentSubtitleFontSize > 8) {
        currentSubtitleFontSize--;
        ctx.font = `normal ${currentSubtitleFontSize}px "${effectiveFontFamily}", sans-serif`;
    }
    // Position the subtitle below the main title.
    const subtitleY = titleY + (currentTitleFontSize / 2) + (currentSubtitleFontSize * 0.8);
    ctx.fillText(subtitleText, centerX, subtitleY);

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