Image Software Title Generator

/**
 * Generates an image that looks like a software title card or splash screen.
 * It combines a background image/icon with customizable text elements.
 *
 * @param {Image} originalImg The original image object to be used as a background or an icon.
 * @param {string} titleText The main title of the software.
 * @param {string} subtitleText A smaller subtitle or tagline displayed below the main title.
 * @param {string} versionText A version number, typically shown in a corner.
 * @param {string} fontFamily A web-safe or Google Font to use for the text.
 * @param {string} titleColor The color of the main title text (e.g., '#FFFFFF').
 * @param {string} subtitleColor The color of the subtitle text.
 * @param {string} versionColor The color of the version text.
 * @param {string} backgroundColor The background color to use if the image is not set as a full background.
 * @param {number} titleFontSize The font size in pixels for the main title.
 * @param {number} subtitleFontSize The font size in pixels for the subtitle.
 * @param {number} versionFontSize The font size in pixels for the version text.
 * @param {string} layout Determines how the original image is used: 'background' (fills the canvas), 'icon-top' (icon above text), or 'icon-left' (icon to the left of text).
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the generated canvas element.
 */
async function processImage(originalImg, titleText = 'My Software', subtitleText = 'The Next Generation Tool', versionText = 'Version 1.0', fontFamily = 'Orbitron', titleColor = '#FFFFFF', subtitleColor = '#CCCCCC', versionColor = '#AAAAAA', backgroundColor = '#2c3e50', titleFontSize = 60, subtitleFontSize = 24, versionFontSize = 18, layout = 'background') {

    // Helper function to dynamically load a Google Font
    const loadFont = async (font) => {
        const fontId = `font-${font.replace(/\s/g, '-')}`;
        if (!document.getElementById(fontId)) {
            const link = document.createElement('link');
            link.id = fontId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=${font.replace(/\s/g, '+')}:wght@400;700&display=swap`;
            document.head.appendChild(link);
            try {
                // Wait for the font to be loaded and ready
                await document.fonts.load(`12px ${font}`);
            } catch (error) {
                console.error(`Could not load font: ${font}`, error);
            }
        }
    };

    // Load the selected font
    await loadFont(fontFamily);

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions, using original image size but with a reasonable minimum
    const canvasWidth = Math.max(800, originalImg.naturalWidth);
    const canvasHeight = Math.max(600, originalImg.naturalHeight);
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // --- Draw Background or Icon ---

    if (layout === 'background') {
        // Draw the image as a full background
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        // Add a semi-transparent overlay to improve text readability
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    } else {
        // Fill with a solid background color
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // --- Calculate Positioning ---
    let textX = canvas.width / 2;
    let textY = canvas.height / 2;
    const padding = 30;

    // Adjust positions if layout is icon-based
    if (layout === 'icon-top' || layout === 'icon-left') {
        const iconSize = Math.min(canvas.width, canvas.height) * 0.25;
        if (layout === 'icon-top') {
            const iconX = canvas.width / 2 - iconSize / 2;
            const iconY = canvas.height / 2 - iconSize - padding / 2;
            ctx.drawImage(originalImg, iconX, iconY, iconSize, iconSize);
            textY = canvas.height / 2 + padding / 2;
        } else { // layout === 'icon-left'
            const iconX = canvas.width / 2 - iconSize - padding / 2;
            const iconY = canvas.height / 2 - iconSize / 2;
            ctx.drawImage(originalImg, iconX, iconY, iconSize, iconSize);
            textX = canvas.width / 2 + padding / 2;
            ctx.textAlign = 'left'; // Align text to the left of the center line
        }
    }

    // --- Draw Text ---

    // Draw Main Title
    if (layout !== 'icon-left') {
       ctx.textAlign = 'center';
    }
    ctx.textBaseline = 'middle';
    ctx.fillStyle = titleColor;
    ctx.font = `bold ${titleFontSize}px ${fontFamily}`;
    ctx.fillText(titleText, textX, textY);

    // Draw Subtitle
    const subtitleYOffset = titleFontSize * 0.6 + subtitleFontSize * 0.5;
    ctx.fillStyle = subtitleColor;
    ctx.font = `${subtitleFontSize}px ${fontFamily}`;
    ctx.fillText(subtitleText, textX, textY + subtitleYOffset);

    // Draw Version Text
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillStyle = versionColor;
    ctx.font = `${versionFontSize}px ${fontFamily}`;
    ctx.fillText(versionText, canvas.width - 20, canvas.height - 20);

    return canvas;
}