Image Address Annotation Tool

async function processImage(originalImg, addressText = "123 Main Street, Anytown, USA", backgroundColor = "rgba(0, 0, 0, 0.7)", textColor = "white", fontSize = 32, fontFamily = "Roboto", position = "bottom") {
    // Sanitize numeric and string inputs
    const validatedFontSize = Number(fontSize) || 32;
    const validatedFontFamily = typeof fontFamily === 'string' ? fontFamily : 'sans-serif';

    /**
     * Dynamically loads a font from Google Fonts.
     * @param {string} family The font family name.
     */
    const loadFont = async (family) => {
        const fontId = `google-font-${family.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=${family.replace(/\s+/g, '+')}&display=swap`;
            document.head.appendChild(link);
            await new Promise((resolve, reject) => {
                link.onload = resolve;
                link.onerror = reject;
            });
        }
    };

    // Load the specified font, with a fallback
    try {
        await loadFont(validatedFontFamily);
        await document.fonts.load(`${validatedFontSize}px ${validatedFontFamily}`);
    } catch (e) {
        console.error(`Font '${validatedFontFamily}' could not be loaded. Falling back to 'sans-serif'.`, e);
        // Use a web-safe fallback font if Google Font fails
        fontFamily = 'sans-serif';
    }

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

    // Set canvas dimensions to match the image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // --- Annotation Banner and Text ---

    // Define banner properties
    const bannerPadding = validatedFontSize * 0.4;
    const bannerHeight = validatedFontSize + (bannerPadding * 2);
    const bannerY = position === 'top' ? 0 : canvas.height - bannerHeight;

    // Draw the background banner
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, bannerY, canvas.width, bannerHeight);

    // Set text properties
    ctx.font = `${validatedFontSize}px ${validatedFontFamily}`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Calculate text position
    const textX = canvas.width / 2;
    const textY = bannerY + bannerHeight / 2;

    // Draw the address text
    ctx.fillText(addressText, textX, textY);

    return canvas;
}