Image Name Translator And Editor

/**
 * Overlays text on an image, functioning as an image editor. This tool can be used to add translated
 * names or any other text onto an image with various styling options. It supports web-safe fonts
 * and dynamically loads fonts from Google Fonts.
 *
 * @param {Image} originalImg The original image object to draw on.
 * @param {string} textToDraw The text content to add to the image.
 * @param {number} fontSize The size of the font in pixels.
 * @param {string} fontFamily The font family to use (e.g., 'Arial', 'Impact', or a Google Font like 'Open Sans').
 * @param {string} fontColor The color of the text (e.g., '#FFFFFF' or 'white').
 * @param {string} strokeColor The color of the text outline.
 * @param {number} strokeWidth The width of the text outline in pixels. A value of 0 means no outline.
 * @param {string} position The anchor point for the text. Can be 'topLeft', 'topCenter', 'topRight', 'centerLeft', 'center', 'centerRight', 'bottomLeft', 'bottomCenter', 'bottomRight'.
 * @param {number} offsetX A horizontal offset (in pixels) from the anchor point.
 * @param {number} offsetY A vertical offset (in pixels) from the anchor point.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the canvas element containing the final image.
 */
async function processImage(originalImg, textToDraw = 'Your Text Here', fontSize = 64, fontFamily = 'Impact', fontColor = '#FFFFFF', strokeColor = '#000000', strokeWidth = 5, position = 'bottomCenter', offsetX = 0, offsetY = 0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    ctx.drawImage(originalImg, 0, 0);

    // List of common web-safe/system fonts to avoid trying to fetch from Google Fonts.
    const systemFonts = ['arial', 'helvetica', 'verdana', 'tahoma', 'trebuchet ms', 'times new roman', 'georgia', 'garamond', 'courier new', 'brush script mt', 'impact', 'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy'];

    // If the font is likely not a system font, try to load it from Google Fonts.
    if (!systemFonts.some(f => fontFamily.toLowerCase().trim() === f)) {
        try {
            const googleFontFamily = fontFamily.replace(/ /g, '+');
            const fontUrl = `https://fonts.googleapis.com/css2?family=${googleFontFamily}:wght@400;700&display=swap`;

            // Check if a stylesheet for this font family is already added to prevent duplicates.
            if (!document.querySelector(`link[href^="https://fonts.googleapis.com/css2?family=${googleFontFamily}"]`)) {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = fontUrl;
                document.head.appendChild(link);

                // Wait for the stylesheet to load before trying to use the font.
                await new Promise((resolve, reject) => {
                    link.onload = resolve;
                    link.onerror = () => reject(new Error(`Failed to load stylesheet for font: ${fontFamily}`));
                });
            }
            // Wait for the browser to be ready to render the font.
            await document.fonts.load(`12px "${fontFamily}"`);
        } catch (e) {
            console.warn(`Could not load font "${fontFamily}" from Google Fonts. The browser will use a fallback font.`, e);
        }
    }

    // Set text style properties. Using quotes around fontFamily is a good practice.
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.lineJoin = 'round'; // For smoother corners on the text stroke

    // Calculate a dynamic margin based on the font size to avoid text touching the edges.
    const margin = fontSize / 4;
    let x, y;

    // Determine horizontal alignment and position
    const posLower = position.toLowerCase();
    if (posLower.includes('left')) {
        ctx.textAlign = 'left';
        x = margin + offsetX;
    } else if (posLower.includes('right')) {
        ctx.textAlign = 'right';
        x = canvas.width - margin + offsetX;
    } else { // Default to center
        ctx.textAlign = 'center';
        x = canvas.width / 2 + offsetX;
    }

    // Determine vertical alignment and position
    if (posLower.includes('top')) {
        ctx.textBaseline = 'top';
        y = margin + offsetY;
    } else if (posLower.includes('bottom')) {
        ctx.textBaseline = 'bottom';
        y = canvas.height - margin + offsetY;
    } else { // Default to middle
        ctx.textBaseline = 'middle';
        y = canvas.height / 2 + offsetY;
    }

    // Draw the text stroke (outline) first, then the fill.
    if (strokeWidth > 0) {
        ctx.strokeText(textToDraw, x, y);
    }
    ctx.fillText(textToDraw, x, y);

    return canvas;
}