Image Text Action Tool

/**
 * Adds customizable text over an image.
 * This function draws the original image onto a canvas and then overlays it with the specified text.
 * It supports web-safe fonts and can dynamically load fonts from Google Fonts.
 *
 * @param {Image} originalImg The original HTML Image object.
 * @param {string} text The text content to write on the image.
 * @param {number} fontSize The font size in pixels.
 * @param {string} fontFamily The font family (e.g., 'Arial', 'Roboto'). Assumes Google Fonts for non-web-safe names.
 * @param {string} fontColor A CSS color string for the text fill (e.g., '#FFFFFF', 'rgba(255, 0, 0, 0.5)').
 * @param {string} shadowColor A CSS color string for the text shadow/outline.
 * @param {number} shadowBlur The blur radius for the text shadow, creating a soft outline effect.
 * @param {number} positionX The horizontal position of the text's anchor point as a percentage of the image width (0-100).
 * @param {number} positionY The vertical position of the text's anchor point as a percentage of the image height (0-100).
 * @param {string} textAlign The horizontal alignment of the text ('left', 'center', 'right').
 * @param {string} textBaseline The vertical alignment of the text ('top', 'middle', 'bottom').
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a canvas element with the image and text.
 */
async function processImage(
    originalImg,
    text = 'Sample Text',
    fontSize = 48,
    fontFamily = 'Impact',
    fontColor = '#FFFFFF',
    shadowColor = '#000000',
    shadowBlur = 5,
    positionX = 50,
    positionY = 50,
    textAlign = 'center',
    textBaseline = 'middle'
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // A list of common web-safe fonts to avoid unnecessary network requests.
    const webSafeFonts = [
        'arial', 'verdana', 'helvetica', 'tahoma', 'trebuchet ms', 
        'times new roman', 'georgia', 'garamond', 'courier new', 'brush script mt', 'impact'
    ];

    // If the font is not a common web-safe one, assume it's a Google Font and load it.
    if (!webSafeFonts.includes(fontFamily.toLowerCase())) {
        try {
            const fontUrlName = fontFamily.replace(/\s/g, '+');
            const fontId = `font-link-${fontUrlName}`;
            if (!document.getElementById(fontId)) {
                const link = document.createElement('link');
                link.id = fontId;
                link.rel = 'stylesheet';
                link.href = `https://fonts.googleapis.com/css2?family=${fontUrlName}&display=swap`;
                document.head.appendChild(link);
            }
            // Wait until the browser has loaded the font.
            await document.fonts.load(`${fontSize}px "${fontFamily}"`);
        } catch (e) {
            console.warn(`Could not load font "${fontFamily}" from Google Fonts. The browser will use a fallback font.`, e);
        }
    }

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

    // Set text style properties
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;

    // Apply a shadow/outline for better readability
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = shadowBlur > 0 ? shadowBlur : 0;

    // Calculate the pixel position from the percentage values
    const x = (canvas.width * positionX) / 100;
    const y = (canvas.height * positionY) / 100;

    // Draw the text on the canvas
    ctx.fillText(text, x, y);

    return canvas;
}