Image Sharing Enthusiast Tool

async function processImage(originalImg, topText = 'Я ХВАСТУНИШКА', bottomText = '', font = 'Impact', fontSize = 48, textColor = '#FFFFFF', strokeColor = '#000000') {
    /**
     * Dynamically loads a font from Google Fonts if it's not a standard web-safe font.
     * @param {string} fontName The name of the font to load.
     */
    async function loadFont(fontName) {
        // Simple check for common web-safe fonts to avoid unnecessary network requests.
        const webSafeFonts = ['Impact', 'Arial', 'Verdana', 'Helvetica', 'sans-serif', 'Georgia', 'Times New Roman', 'serif'];
        if (webSafeFonts.includes(fontName)) {
            return;
        }

        try {
            // Check if the font is already loaded or available.
            if (document.fonts.check(`1em ${fontName}`)) {
                return;
            }

            const linkId = `google-font-${fontName.replace(/\s+/g, '-')}`;
            if (!document.getElementById(linkId)) {
                const link = document.createElement('link');
                link.id = linkId;
                link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s+/g, '+')}&display=swap`;
                link.rel = 'stylesheet';
                document.head.appendChild(link);
                // Wait for the font to be ready.
                await document.fonts.load(`bold 1em ${fontName}`);
            }
        } catch (e) {
            console.warn(`Could not load font "${fontName}". It might not be a valid Google Font. Falling back to Impact.`, e);
            font = 'Impact'; // Assign fallback to the outer scope variable.
        }
    }

    await loadFont(font);

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

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

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Use a font size relative to image width, but capped by the user's input.
    const calculatedFontSize = Math.min(Number(fontSize) || 48, Math.floor(canvas.width / 10));
    ctx.font = `bold ${calculatedFontSize}px ${font}, sans-serif`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = calculatedFontSize / 8; // Stroke width relative to font size
    ctx.textAlign = 'center';

    /**
     * Wraps and draws styled text onto the canvas.
     * @param {string} text The text content to draw.
     * @param {number} y The initial Y coordinate.
     * @param {'top' | 'bottom'} baseline The text baseline.
     */
    const drawText = (text, y, baseline) => {
        if (!text || typeof text !== 'string') return;
        
        text = text.toUpperCase();
        ctx.textBaseline = baseline;

        const maxWidth = canvas.width * 0.9;
        const lineHeight = calculatedFontSize * 1.2;
        const words = text.split(' ');
        let line = '';
        const lines = [];

        // 1. Calculate all the lines that need to be drawn based on maxWidth
        for (let n = 0; n < words.length; n++) {
            const testLine = line + words[n] + ' ';
            const metrics = ctx.measureText(testLine);
            if (metrics.width > maxWidth && n > 0) {
                lines.push(line.trim());
                line = words[n] + ' ';
            } else {
                line = testLine;
            }
        }
        lines.push(line.trim());

        // 2. Calculate the starting Y position
        let currentY;
        if (baseline === 'top') {
            currentY = y;
        } else { // 'bottom'
            currentY = y - (lines.length - 1) * lineHeight;
        }
        
        // 3. Draw each line with an outline and fill
        for (const singleLine of lines) {
            ctx.strokeText(singleLine, canvas.width / 2, currentY);
            ctx.fillText(singleLine, canvas.width / 2, currentY);
            currentY += lineHeight;
        }
    };

    // Draw top text with a 5% margin from the top
    const topMargin = canvas.height * 0.05 + calculatedFontSize;
    drawText(topText, topMargin, 'top');

    // Draw bottom text with a 5% margin from the bottom
    const bottomMargin = canvas.height * 0.95;
    drawText(bottomText, bottomMargin, 'bottom');

    return canvas;
}