Image Character Name Window Tool

/**
 * Creates an image canvas styled like a video game character name window.
 * It combines a character portrait, a name, and a stylized box.
 * Note: This function requires an internet connection to load the Google Font dynamically.
 *
 * @param {HTMLImageElement} originalImg The character image object. Must be fully loaded.
 * @param {string} characterName The name of the character to display.
 * @param {string} fontFamily The Google Font to use for the name.
 * @param {number} fontSize The font size for the character name in pixels.
 * @param {string} textColor The CSS color of the character name text.
 * @param {string} boxColor The CSS color of the inner background box.
 * @param {string} borderColor The CSS color of the box's border.
 * @param {number} borderWidth The width of the box's border in pixels.
 * @param {number} padding The inner padding of the box in pixels.
 * @param {number} spacing The space between the image and the name text in pixels.
 * @param {number} imageHeight The height to which the character image will be scaled. Width is scaled proportionally.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the generated canvas element.
 */
async function processImage(
    originalImg,
    characterName = 'Character',
    fontFamily = 'Press Start 2P',
    fontSize = 24,
    textColor = '#FFFFFF',
    boxColor = 'rgba(30, 30, 100, 0.8)',
    borderColor = '#FFFFFF',
    borderWidth = 3,
    padding = 15,
    spacing = 15,
    imageHeight = 96
) {
    /**
     * Helper function to dynamically load a font from Google Fonts.
     * It checks if the font is already available to avoid redundant loads.
     * @param {string} family The name of the font family.
     */
    const loadGoogleFont = async (family) => {
        const fontId = `google-font-${family.replace(/\s/g, '-')}`;
        if (document.getElementById(fontId)) {
            // Font is already requested, wait for it to be ready
            try {
                await document.fonts.load(`${fontSize}px "${family}"`);
            } catch (e) {
                console.warn(`Font "${family}" was requested but failed to load. Using fallback.`, e);
            }
            return;
        }

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

        try {
            await document.fonts.load(`${fontSize}px "${family}"`);
        } catch (e) {
            console.warn(`Could not load Google Font "${family}". Using system default font.`, e);
            // If it fails, the browser will use a fallback font.
        }
    };

    // Ensure the custom font is loaded before we start drawing
    await loadGoogleFont(fontFamily);

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

    // --- 1. Calculate dimensions ---

    // Calculate scaled image width based on the desired fixed height
    const scaledImageWidth = imageHeight * (originalImg.width / originalImg.height);

    // Measure text dimensions
    ctx.font = `${fontSize}px "${fontFamily}"`;
    const textMetrics = ctx.measureText(characterName);
    const textWidth = textMetrics.width;
    // A simplified but effective approximation for text height
    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent || fontSize;

    // Calculate the size of the inner content area
    const innerWidth = scaledImageWidth + spacing + textWidth;
    const innerHeight = Math.max(imageHeight, textHeight);

    // Calculate final canvas size including padding and borders
    canvas.width = innerWidth + padding * 2;
    canvas.height = innerHeight + padding * 2;


    // --- 2. Draw elements ---

    // Draw the outer border
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw the inner background box
    ctx.fillStyle = boxColor;
    ctx.fillRect(borderWidth, borderWidth, canvas.width - borderWidth * 2, canvas.height - borderWidth * 2);

    // Draw the character image, vertically centered within the inner height
    const imageY = padding + (innerHeight - imageHeight) / 2;
    ctx.drawImage(originalImg, padding, imageY, scaledImageWidth, imageHeight);

    // Draw the character name text, vertically centered
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    const textX = padding + scaledImageWidth + spacing;
    const textY = padding + innerHeight / 2;
    ctx.fillText(characterName, textX, textY);

    return canvas;
}