Image Video Channel Name Creator

/**
 * Adds a "video channel name" style overlay to an image.
 * This function overlays a stylized text box, similar to a channel watermark on a video,
 * onto the provided image. It supports customization for text, position, font, colors, and styling.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {string} [channelName='MyChannel'] The text for the channel name.
 * @param {string} [position='bottom-left'] The position of the overlay. Options: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center'.
 * @param {number} [fontSizePercent=4] The font size as a percentage of the image's height.
 * @param {string} [fontFamily='Oswald'] The font family to use. It dynamically loads 'Oswald' from Google Fonts. Falls back to 'Arial' on error.
 * @param {string} [textColor='#FFFFFF'] The color of the channel name text.
 * @param {string} [backgroundColor='rgba(0, 0, 0, 0.6)'] The background color of the overlay box.
 * @param {string} [logoSymbol='►'] A symbol or text to use as a logo before the channel name.
 * @param {string} [logoColor='#FF0000'] The color of the logo symbol.
 * @param {number} [marginPercent=2] The margin from the image edges, as a percentage of the image's height.
 * @param {number} [padding=10] The internal padding of the overlay box in pixels.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the canvas element containing the final image.
 */
async function processImage(
    originalImg,
    channelName = 'MyChannel',
    position = 'bottom-left',
    fontSizePercent = 4,
    fontFamily = 'Oswald',
    textColor = '#FFFFFF',
    backgroundColor = 'rgba(0, 0, 0, 0.6)',
    logoSymbol = '►',
    logoColor = '#FF0000',
    marginPercent = 2,
    padding = 10
) {
    // Helper function to dynamically load a font if it's not already available.
    const loadFont = async (name, url) => {
        if (document.fonts.check(`1em ${name}`)) {
            return true;
        }
        try {
            const font = new FontFace(name, `url(${url})`);
            await font.load();
            document.fonts.add(font);
            return true;
        } catch (e) {
            console.error(`Failed to load font: ${name} from ${url}`, e);
            return false;
        }
    };

    // Use a specific font. If loading fails, we'll fall back to a default web-safe font.
    let effectiveFontFamily = fontFamily;
    if (fontFamily === 'Oswald') {
        const fontLoaded = await loadFont('Oswald', 'https://fonts.gstatic.com/s/oswald/v49/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2');
        if (!fontLoaded) {
            effectiveFontFamily = 'Arial'; // Fallback font
        }
    }

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // --- Calculate metrics for the overlay ---
    const actualFontSize = (fontSizePercent / 100) * h;
    ctx.font = `${actualFontSize}px "${effectiveFontFamily}", sans-serif`;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    
    // Measure text to determine the size of the background box
    const logoText = logoSymbol ? logoSymbol + ' ' : '';
    const logoMetrics = ctx.measureText(logoText);
    const nameMetrics = ctx.measureText(channelName);
    const totalTextWidth = logoMetrics.width + nameMetrics.width;

    const boxWidth = totalTextWidth + padding * 2;
    const boxHeight = actualFontSize + padding * 2;
    const actualMargin = (marginPercent / 100) * h;

    // --- Calculate the position of the overlay box ---
    let boxX, boxY;

    switch (position) {
        case 'top-left':
            boxX = actualMargin;
            boxY = actualMargin;
            break;
        case 'top-right':
            boxX = w - boxWidth - actualMargin;
            boxY = actualMargin;
            break;
        case 'bottom-right':
            boxX = w - boxWidth - actualMargin;
            boxY = h - boxHeight - actualMargin;
            break;
        case 'center':
            boxX = (w - boxWidth) / 2;
            boxY = (h - boxHeight) / 2;
            break;
        case 'bottom-left':
        default:
            boxX = actualMargin;
            boxY = h - boxHeight - actualMargin;
            break;
    }

    // --- Draw the overlay elements ---
    
    // Draw the background box
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(boxX, boxY, boxWidth, boxHeight);

    // Calculate vertical center for text
    const textY = boxY + boxHeight / 2;
    
    // Draw the logo symbol
    if (logoSymbol) {
        const logoX = boxX + padding;
        ctx.fillStyle = logoColor;
        ctx.fillText(logoText, logoX, textY);
    }

    // Draw the channel name
    const nameX = boxX + padding + logoMetrics.width;
    ctx.fillStyle = textColor;
    ctx.fillText(channelName, nameX, textY);

    // Return the final canvas
    return canvas;
}