Image Mama

async function processImage(originalImg, text = "Мама", borderScale = 0.05, bottomScale = 0.22, bgColor = "#ffffff", textColor = "#2d2d2d") {
    // Dynamically load a beautiful cursive Google Font for the text
    const fontFamily = 'Caveat';
    await new Promise((resolve) => {
        const fontId = 'font-caveat-mama';
        if (document.getElementById(fontId)) {
            document.fonts.ready.then(resolve);
            return;
        }
        
        const link = document.createElement('link');
        link.id = fontId;
        link.rel = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap`;
        document.head.appendChild(link);
        
        link.onload = async () => {
            try {
                // Ensure the font is actually loaded before drawing on canvas
                await document.fonts.load(`600 10px "${fontFamily}"`);
            } catch (e) {
                console.warn("Failed to wait for document.fonts.load", e);
            }
            resolve();
        };
        link.onerror = resolve; // Proceed even if there's an error loading the font
    });

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

    const width = originalImg.width;
    const height = originalImg.height;

    // Calculate dimensions to give it a Polaroid frame look
    const border = Math.max(width * Number(borderScale), 15);
    const bottomBorder = Math.max(width * Number(bottomScale), 60);

    canvas.width = width + (border * 2);
    canvas.height = height + border + bottomBorder;

    // 1. Draw the frame background (Polaroid paper)
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Add a slight shadow effect around the outer edge for realism
    ctx.shadowColor = 'rgba(0, 0, 0, 0.15)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height); // Redraw with shadow
    
    // Reset shadow
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, border, border, width, height);

    // 4. Draw a subtle inner border line around the picture (adds depth)
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.lineWidth = Math.max(1, width * 0.002);
    ctx.strokeRect(border, border, width, height);

    // 5. Draw the "Мама" (or custom) text at the bottom
    const fontSize = bottomBorder * 0.5;
    ctx.font = `600 ${fontSize}px "${fontFamily}", "Brush Script MT", "Comic Sans MS", cursive`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const textX = canvas.width / 2;
    const textY = height + border + (bottomBorder / 2);
    
    ctx.fillText(text, textX, textY);

    return canvas;
}