Image Logo Generator

async function processImage(originalImg, logoText = 'LOGO', fontColor = '#FFFFFF', fontSize = 48, fontFamily = 'Montserrat', fontWeight = 'bold', position = 'bottom-right', overlayColor = 'rgba(0, 0, 0, 0.5)', padding = 10) {

    /**
     * Dynamically loads a font from Google Fonts and waits for it to be ready.
     * @param {string} font - The name of the font to load.
     */
    const loadGoogleFont = async (font) => {
        const fontId = `google-font-${font.replace(/\s+/g, '-')}`;
        if (document.getElementById(fontId)) {
            // Font has already been requested, just wait for it to be ready
            await document.fonts.load(`1em "${font}"`);
            return;
        }

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

        // Wait for the font to be loaded and available for use
        await document.fonts.load(`1em "${font}"`);
    };

    // A list of common web-safe fonts to avoid unnecessary network requests.
    const webSafeFonts = [
        'Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman',
        'Georgia', 'Garamond', 'Courier New', 'Brush Script MT', 'Impact', 'Comic Sans MS'
    ];

    // Get the primary font name from the potentially comma-separated list.
    let mainFont = fontFamily.split(',')[0].replace(/['"]/g, '').trim();

    // If the font is not web-safe, assume it's a Google Font and load it.
    if (!webSafeFonts.find(f => f.toLowerCase() === mainFont.toLowerCase())) {
        try {
            await loadGoogleFont(mainFont);
        } catch (error) {
            console.error(`Failed to load font: ${mainFont}. Falling back to Arial.`, error);
            mainFont = 'Arial'; // Use a fallback font if loading fails.
        }
    }

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

    // Set the font style for measuring the text.
    const fontStyle = `${fontWeight} ${fontSize}px "${mainFont}", sans-serif`;
    ctx.font = fontStyle;

    // Measure text dimensions.
    const textMetrics = ctx.measureText(logoText);
    const textWidth = textMetrics.width;
    // Use the specified font size as a reliable approximation of text height.
    const textHeight = Number(fontSize);

    // Calculate background rectangle dimensions.
    const bgWidth = textWidth + (padding * 2);
    const bgHeight = textHeight + (padding * 2);

    let textX, textY, bgX, bgY;

    // Calculate coordinates for the text and its background based on the position.
    // Using 'top' textBaseline simplifies vertical alignment calculations.
    switch (position) {
        case 'top-left':
            textX = padding;
            textY = padding;
            bgX = 0;
            bgY = 0;
            break;
        case 'top-right':
            textX = canvas.width - textWidth - padding;
            textY = padding;
            bgX = canvas.width - bgWidth;
            bgY = 0;
            break;
        case 'bottom-left':
            textX = padding;
            textY = canvas.height - textHeight - padding;
            bgX = 0;
            bgY = canvas.height - bgHeight;
            break;
        case 'center':
            textX = (canvas.width - textWidth) / 2;
            textY = (canvas.height - textHeight) / 2;
            bgX = (canvas.width - bgWidth) / 2;
            bgY = (canvas.height - bgHeight) / 2;
            break;
        case 'bottom-right':
        default:
            textX = canvas.width - textWidth - padding;
            textY = canvas.height - textHeight - padding;
            bgX = canvas.width - bgWidth;
            bgY = canvas.height - bgHeight;
            break;
    }

    // Draw the semi-transparent background if an overlay color is specified.
    if (overlayColor && overlayColor !== 'transparent' && overlayColor !== '') {
        ctx.fillStyle = overlayColor;
        ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
    }

    // Set text properties and draw the logo text.
    ctx.fillStyle = fontColor;
    ctx.font = fontStyle;
    ctx.textBaseline = 'top'; // Align text to the top to match coordinate calculations.
    ctx.fillText(logoText, textX, textY);

    // Return the final canvas with the logo.
    return canvas;
}