Image Alphabet Generator

/**
 * Creates text where the characters are filled with a provided image texture.
 * This function interprets "Image Alphabet Generator" as a tool to generate text
 * (an "alphabet") using an image as the fill pattern.
 *
 * @param {Image} originalImg The input Image object, which should be fully loaded.
 * @param {string} [text='IMAGE TEXT'] The text to generate.
 * @param {number} [fontSize=150] The size of the font in pixels.
 * @param {string} [fontFamily='Anton'] The font family for the text. Recommends bold/heavy fonts. It will try to load this from Google Fonts. Supports web-safe fonts too.
 * @param {string} [backgroundColor='transparent'] The background color for the canvas. Use CSS color strings like '#FFFFFF' or 'transparent'.
 * @returns {Promise<HTMLCanvasElement>} A Promise that resolves with a canvas element containing the generated image text.
 */
async function processImage(originalImg, text = 'IMAGE TEXT', fontSize = 150, fontFamily = 'Anton', backgroundColor = 'transparent') {
    // 1. Sanitize input parameters
    fontSize = Math.max(1, Number(fontSize)) || 150;
    text = String(text).trim();

    // 2. Dynamically load the font from Google Fonts if it's not a standard web-safe font.
    // We check if the font is loaded to avoid redundant loads.
    const fontToLoad = fontFamily;
    try {
        if (!document.fonts.check(`${fontSize}px ${fontToLoad}`)) {
            const fontUrl = `https://fonts.googleapis.com/css2?family=${fontToLoad.replace(/ /g, '+')}&display=swap`;
            const link = document.createElement('link');
            link.href = fontUrl;
            link.rel = 'stylesheet';

            // Wait for the stylesheet to load
            await new Promise((resolve, reject) => {
                link.onload = resolve;
                link.onerror = reject;
                document.head.appendChild(link);
            });

            // Wait for the font to be ready for use
            await document.fonts.load(`${fontSize}px ${fontToLoad}`);
        }
    } catch (error) {
        console.error(`Could not load Google Font "${fontToLoad}". Falling back to a web-safe font.`, error);
        fontFamily = 'Impact'; // A good, bold, web-safe fallback
    }

    const fontString = `${fontSize}px "${fontFamily}", Impact, sans-serif`;

    // 3. Measure text dimensions using a temporary canvas
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.font = fontString;

    if (!text) {
        // Return a small, empty canvas if there's no text
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        return emptyCanvas;
    }

    const metrics = tempCtx.measureText(text);
    const textWidth = metrics.width;
    const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

    // Add a small buffer to prevent clipping issues in some browsers
    const canvasWidth = Math.ceil(textWidth) + 2;
    const canvasHeight = Math.ceil(textHeight) + 2;

    // 4. Create the final output canvas
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // 5. Fill the background if a color is specified
    if (backgroundColor && backgroundColor !== 'transparent') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // 6. Create a pattern from the original image
    const pattern = ctx.createPattern(originalImg, 'repeat');
    if (!pattern) {
        console.error("Failed to create pattern. The image might not be fully loaded or is invalid.");
        ctx.fillStyle = 'red';
        ctx.font = '20px Arial';
        ctx.fillText('Image Error', 10, 30);
        return canvas;
    }

    // 7. Configure context and draw the text filled with the image pattern
    ctx.fillStyle = pattern;
    ctx.font = fontString;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';

    // The y-coordinate for fillText specifies the baseline. To position the
    // very top of the text at the top of our canvas (plus a 1px buffer),
    // we need to set the baseline's y-position to the height of the text above the baseline.
    const yPos = metrics.actualBoundingBoxAscent + 1;
    ctx.fillText(text, 1, yPos);

    // 8. Return the final canvas element
    return canvas;
}