Image Software Portal

/**
 * Given the vague description "Image Software Portal" / "Софтпортал", this function
 * interprets the task as applying a brand watermark to an image. It adds text to the
 * image, with customizable content, font, size, color, and position. It can also
 * dynamically load fonts from Google Fonts.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} [text='Софтпортал'] The watermark text to add.
 * @param {number} [fontSize=48] The font size of the watermark text in pixels.
 * @param {string} [fontColor='rgba(255, 255, 255, 0.7)'] The color of the watermark text.
 * @param {string} [position='bottom-right'] The position of the watermark. Options: 'top-left', 'top-center', 'top-right', 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'.
 * @param {string} [fontFamily='Arial'] The font family for the text. Can be a web-safe font or a Google Font name (e.g., 'Roboto').
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a new canvas element containing the watermarked image.
 */
async function processImage(originalImg, text = 'Софтпортал', fontSize = 48, fontColor = 'rgba(255, 255, 255, 0.7)', position = 'bottom-right', fontFamily = 'Arial') {

    /**
     * Dynamically loads a font from Google Fonts if it's not a common system font.
     * @param {string} font The font family name.
     */
    const loadFont = async (font) => {
        const systemFonts = /^(Arial|Verdana|Helvetica|Tahoma|Trebuchet MS|Times New Roman|Georgia|Garamond|Courier New|Brush Script MT|Impact|Comic Sans MS|sans-serif|serif|monospace|cursive|fantasy)$/i;
        if (systemFonts.test(font)) {
            return; // It's a system font, no need to load.
        }

        try {
            // Check if the font is already available to avoid unnecessary network requests.
            if (document.fonts.check(`12px "${font}"`)) {
                return;
            }

            const fontUrl = `https://fonts.googleapis.com/css2?family=${font.replace(/\s/g, '+')}&display=swap`;
            const linkId = `google-font-${font.replace(/\s/g, '-')}`;

            if (!document.getElementById(linkId)) {
                const link = document.createElement('link');
                link.id = linkId;
                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: ${font}`));
                });
            }

            // Wait for the font to be ready for rendering.
            await document.fonts.load(`12px "${font}"`);
        } catch (e) {
            console.warn(`Could not load font "${font}" from Google Fonts. The browser may fall back to a system font.`, e);
        }
    };

    // Load the specified font if necessary.
    await loadFont(fontFamily);

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

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

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

    // Set up text properties. Use quotes around fontFamily for names with spaces.
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.fillStyle = fontColor;

    // Use a margin relative to the font size for better spacing.
    const margin = fontSize / 2;
    let x, y;

    // Calculate text position based on the 'position' parameter.
    switch (position) {
        case 'top-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            x = margin;
            y = margin;
            break;
        case 'top-center':
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            x = canvas.width / 2;
            y = margin;
            break;
        case 'top-right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'top';
            x = canvas.width - margin;
            y = margin;
            break;
        case 'center-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            x = margin;
            y = canvas.height / 2;
            break;
        case 'center':
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            x = canvas.width / 2;
            y = canvas.height / 2;
            break;
        case 'center-right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            x = canvas.width - margin;
            y = canvas.height / 2;
            break;
        case 'bottom-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            x = margin;
            y = canvas.height - margin;
            break;
        case 'bottom-center':
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            x = canvas.width / 2;
            y = canvas.height - margin;
            break;
        case 'bottom-right':
        default:
            ctx.textAlign = 'right';
            ctx.textBaseline = 'bottom';
            x = canvas.width - margin;
            y = canvas.height - margin;
            break;
    }

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

    return canvas;
}