Между нами девочками Image Generator

async function processImage(originalImg, text = "Между нами, девочками", fontSizePercent = 15, position = "bottom") {
    // Load a glamorous / girly handwritten font from Google Fonts
    const fontName = 'Dancing Script';
    const fontUrl = `https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap&subset=cyrillic`;

    // Dynamically inject font stylesheet if it's not already present
    if (!document.getElementById('meme-girly-font')) {
        const link = document.createElement('link');
        link.id = 'meme-girly-font';
        link.href = fontUrl;
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    }

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

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

    // Calculate font size relative to image height
    let fSize = Math.max(20, (canvas.height * Number(fontSizePercent)) / 100);

    // Wait for the font to load to ensure custom font is applied on the canvas
    try {
        await document.fonts.load(`700 ${fSize}px "${fontName}"`);
    } catch(e) {
        console.warn("Custom font loading was delayed or failed. Falling back to system fonts.");
    }

    ctx.font = `700 ${fSize}px "${fontName}", cursive, "Comic Sans MS"`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Calculate vertical position for the text
    let x = canvas.width / 2;
    let y;
    const margin = fSize * 0.8;
    
    position = position.toLowerCase();
    if (position === 'top') {
        y = margin;
    } else if (position === 'center') {
        y = canvas.height / 2;
    } else {
        y = canvas.height - margin; // default bottom
    }

    // Create a shiny pink gradient for the text
    const gradient = ctx.createLinearGradient(0, y - fSize/2, 0, y + fSize/2);
    gradient.addColorStop(0, '#FFB6C1');   // Light pink
    gradient.addColorStop(0.5, '#FF1493'); // Deep pink
    gradient.addColorStop(1, '#C71585');   // Medium violet red

    // Add a dark drop shadow for readability against any image background
    ctx.save();
    ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
    ctx.shadowBlur = Math.max(5, canvas.height * 0.015);
    ctx.shadowOffsetX = Math.max(2, canvas.height * 0.005);
    ctx.shadowOffsetY = Math.max(2, canvas.height * 0.005);

    // Draw thick white border/stroke
    ctx.lineWidth = Math.max(3, fSize * 0.08);
    ctx.strokeStyle = '#FFFFFF';
    ctx.lineJoin = 'round';
    ctx.strokeText(text, x, y);

    // Fill the text with the pink gradient
    ctx.fillStyle = gradient;
    ctx.fillText(text, x, y);
    ctx.restore();

    // Measure text to dynamically place decorative sparkles
    const textWidth = ctx.measureText(text).width;
    
    // Helper function to draw star-shaped vector sparkles
    function drawSparkle(cx, cy, size) {
        ctx.save();
        ctx.translate(cx, cy);
        ctx.beginPath();
        ctx.moveTo(0, -size);
        ctx.quadraticCurveTo(0, 0, size, 0);
        ctx.quadraticCurveTo(0, 0, 0, size);
        ctx.quadraticCurveTo(0, 0, -size, 0);
        ctx.quadraticCurveTo(0, 0, 0, -size);
        
        ctx.fillStyle = '#FFFFFF';
        // Add a pink glowing aura to the sparkle
        ctx.shadowColor = '#FF69B4'; 
        ctx.shadowBlur = size;
        ctx.fill();
        
        // Draw inner lighter core
        ctx.scale(0.5, 0.5);
        ctx.fillStyle = '#FFC0CB';
        ctx.fill();
        
        ctx.restore();
    }

    // Decorate with sparkles around the text phrase
    drawSparkle(x - textWidth / 2 - fSize * 0.2, y - fSize * 0.3, fSize * 0.25); // Top-left
    drawSparkle(x + textWidth / 2 + fSize * 0.1, y + fSize * 0.2, fSize * 0.3);  // Bottom-right
    drawSparkle(x + textWidth / 2 - fSize * 0.3, y - fSize * 0.4, fSize * 0.15); // Top-right (small)

    return canvas;
}