Image Logo Designer

async function processImage(
    originalImg,
    logoText = 'My Logo',
    fontFamily = "'Poppins', sans-serif",
    fontSize = 48,
    textColor = '#333333',
    textPosition = 'bottom', // Valid options: 'top', 'bottom', 'left', 'right'
    gap = 15,
    backgroundColor = 'transparent',
    padding = 30
) {

    // --- Font Loading ---
    // Extract the primary font name for loading from Google Fonts
    const sanitizedFontFamily = fontFamily.split(',')[0].replace(/'/g, '').trim();
    const webSafeFonts = [
        'Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS',
        'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT'
    ];

    // Only attempt to load fonts from Google if they are not standard web-safe fonts
    if (sanitizedFontFamily && !webSafeFonts.find(f => f.toLowerCase() === sanitizedFontFamily.toLowerCase())) {
        try {
            const fontUrl = `https://fonts.googleapis.com/css2?family=${sanitizedFontFamily.replace(/ /g, '+')}:wght@400;700&display=swap`;
            // Check if the font is already added to the document to avoid duplicates
            if (!document.querySelector(`link[href="${fontUrl}"]`)) {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = fontUrl;
                document.head.appendChild(link);
                // Wait for the stylesheet to load to ensure the font is available for the fonts API
                await new Promise((resolve, reject) => {
                    link.onload = resolve;
                    link.onerror = reject;
                });
            }
        } catch (e) {
            console.error("Failed to create font link:", e);
        }
    }

    const font = `${fontSize}px ${fontFamily}`;
    try {
        // Wait for the browser to confirm the font is ready for use
        await document.fonts.load(font);
    } catch (e) {
        console.warn(`Font '${font}' could not be loaded. A default font may be used by the browser.`);
    }

    // --- Canvas Setup and Measurement ---
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Apply the font to the context to measure the text accurately
    ctx.font = font;
    const textMetrics = ctx.measureText(logoText);
    const textWidth = textMetrics.width;
    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // --- Calculate Final Canvas Dimensions ---
    let canvasWidth, canvasHeight;
    let contentWidth, contentHeight;

    if (textPosition === 'top' || textPosition === 'bottom') {
        contentWidth = Math.max(imgWidth, textWidth);
        contentHeight = imgHeight + gap + textHeight;
        canvasWidth = contentWidth + padding * 2;
        canvasHeight = contentHeight + padding * 2;
    } else { // 'left' or 'right'
        contentWidth = imgWidth + gap + textWidth;
        contentHeight = Math.max(imgHeight, textHeight);
        canvasWidth = contentWidth + padding * 2;
        canvasHeight = contentHeight + padding * 2;
    }

    // Set canvas size. This also clears any previous context state.
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // --- Drawing ---
    // The context state is reset when the canvas is resized, so we re-apply styles.

    // Draw background color
    if (backgroundColor && backgroundColor !== 'transparent') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
    }

    // Set text styles again
    ctx.font = font;
    ctx.fillStyle = textColor;

    // Calculate final X and Y coordinates for the image and text
    let imgX, imgY, textX, textY;

    switch (textPosition) {
        case 'top':
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            imgX = padding + (contentWidth - imgWidth) / 2;
            imgY = padding + textHeight + gap;
            textX = padding + contentWidth / 2;
            textY = padding;
            break;
        case 'left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            imgX = padding + textWidth + gap;
            imgY = padding + (contentHeight - imgHeight) / 2;
            textX = padding;
            textY = padding + contentHeight / 2;
            break;
        case 'right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            imgX = padding;
            imgY = padding + (contentHeight - imgHeight) / 2;
            textX = padding + contentWidth;
            textY = padding + contentHeight / 2;
            break;
        case 'bottom':
        default:
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            imgX = padding + (contentWidth - imgWidth) / 2;
            imgY = padding;
            textX = padding + contentWidth / 2;
            textY = padding + contentHeight;
            break;
    }

    // Draw the image and text onto the canvas
    ctx.drawImage(originalImg, imgX, imgY, imgWidth, imgHeight);
    ctx.fillText(logoText, textX, textY);

    return canvas;
}