Website Logo Keyword Text Generator

async function processImage(originalImg, logoText = "Your Brand", keywordText = "Your tagline or keywords here", layout = "horizontal", textColor = "#2c3e50", keywordColor = "#7f8c8d", bgColor = "transparent", fontFamily = "Roboto") {
    
    // Dynamically load the Google Font requested if it's not a generic sans-serif
    if (fontFamily && fontFamily.toLowerCase() !== "sans-serif") {
        try {
            const fontUrl = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s+/g, '+')}:wght@400;700&display=swap`;
            const link = document.createElement('link');
            link.href = fontUrl;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
            
            // Give a short time for the browser to parse the appended link tag
            await new Promise(r => setTimeout(r, 150));
            // Wait for specific fonts sizes and weights to become available
            await document.fonts.load(`bold 48px "${fontFamily}"`);
            await document.fonts.load(`normal 24px "${fontFamily}"`);
        } catch (e) {
            console.warn("Font loading error or timeout. Falling back to default font. ", e);
        }
    }

    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    const iconBaseSize = 120;
    const padding = 40;
    const gap = 24; // Gap between image and text

    // Set the scale constraint for the image while preserving the aspect ratio
    const scale = Math.min(iconBaseSize / (originalImg.width || 1), iconBaseSize / (originalImg.height || 1));
    const iconW = (originalImg.width || iconBaseSize) * scale;
    const iconH = (originalImg.height || iconBaseSize) * scale;

    // Measure the text widths
    ctx.font = `bold 48px "${fontFamily}", sans-serif`;
    const titleWidth = logoText ? ctx.measureText(logoText).width : 0;

    ctx.font = `normal 24px "${fontFamily}", sans-serif`;
    const keywordWidth = keywordText ? ctx.measureText(keywordText).width : 0;

    const textMaxWidth = Math.max(titleWidth, keywordWidth);
    
    // Using static base heights to keep baselines uniform regardless of specific characters (like "g", "y")
    const titleHeight = logoText ? 48 : 0;
    const keywordHeight = keywordText ? 24 : 0;
    const textGap = (logoText && keywordText) ? 12 : 0; // Gap between title and keyword
    const textTotalHeight = titleHeight + keywordHeight + textGap;

    let canvasW, canvasH;
    let iconX, iconY, textX, titleY, keywordY;

    // Calculate layout variations
    if (layout === "horizontal") {
        canvasW = padding * 2 + iconW + (textTotalHeight > 0 ? gap : 0) + textMaxWidth;
        canvasH = Math.max(iconH, textTotalHeight) + padding * 2;

        iconX = padding;
        iconY = padding + (Math.max(iconH, textTotalHeight) - iconH) / 2;

        textX = padding + iconW + (textTotalHeight > 0 ? gap : 0);
        let textStartY = padding + (Math.max(iconH, textTotalHeight) - textTotalHeight) / 2;
        
        // Approximate the actual ascent for alignment (roughly 80% of font size)
        titleY = textStartY + titleHeight * 0.8;
        keywordY = textStartY + titleHeight + textGap + keywordHeight * 0.8;

    } else {
        // "vertical" layout puts the icon on top and center aligns the text
        canvasW = padding * 2 + Math.max(iconW, textMaxWidth);
        canvasH = padding * 2 + iconH + (textTotalHeight > 0 ? gap : 0) + textTotalHeight;

        iconX = padding + (Math.max(iconW, textMaxWidth) - iconW) / 2;
        iconY = padding;

        textX = canvasW / 2;
        let textStartY = padding + iconH + (textTotalHeight > 0 ? gap : 0);
        
        titleY = textStartY + titleHeight * 0.8;
        keywordY = textStartY + titleHeight + textGap + keywordHeight * 0.8;
    }

    // Set dimensions
    canvas.width = canvasW;
    canvas.height = canvasH;

    // Draw background color if not transparent
    if (bgColor && bgColor.toLowerCase() !== "transparent") {
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // Draw original image (as the logo / mark)
    ctx.drawImage(originalImg, iconX, iconY, iconW, iconH);

    // Draw logo and keyword texts
    ctx.textAlign = layout === "horizontal" ? "left" : "center";

    if (logoText) {
        ctx.font = `bold 48px "${fontFamily}", sans-serif`;
        ctx.fillStyle = textColor;
        ctx.fillText(logoText, textX, titleY);
    }

    if (keywordText) {
        ctx.font = `normal 24px "${fontFamily}", sans-serif`;
        ctx.fillStyle = keywordColor;
        ctx.fillText(keywordText, textX, keywordY);
    }

    return canvas;
}