Image Of Ma Tante

async function processImage(originalImg, text = "Ma Tante", borderColor = "#ffb6c1", dotColor = "#ffffff") {
    // Dynamically load a beautiful cursive Google font to fit the "Ma Tante" aesthetic
    if (!document.getElementById('matante-font')) {
        const link = document.createElement('link');
        link.id = 'matante-font';
        link.href = 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap';
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    }
    
    // Wait for fonts to be ready so the text renders correctly on the canvas
    if (document.fonts) {
        await document.fonts.ready;
    }

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

    // Calculate kitschy border and spacing dynamically based on image size
    const border = Math.max(50, Math.floor(originalImg.width * 0.15));
    const bottomSpace = border + Math.max(40, border * 0.5);
    
    canvas.width = originalImg.width + border * 2;
    canvas.height = originalImg.height + border + bottomSpace;

    // Draw background color (Default: light pink)
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw vintage polka dots for a classic "Ma Tante" vibe
    ctx.fillStyle = dotColor;
    const dotSpacing = Math.max(20, Math.floor(canvas.width / 20));
    const dotRadius = Math.max(3, dotSpacing / 6);
    
    for(let y = 0; y < canvas.height; y += dotSpacing) {
        for(let x = 0; x < canvas.width; x += dotSpacing) {
            ctx.beginPath();
            // Stagger every other row
            const offset = (Math.floor(y / dotSpacing) % 2 === 0) ? 0 : dotSpacing / 2;
            ctx.arc(x + offset, y, dotRadius, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    // Add a white inner frame padding behind the image mimicking vintage physical photos
    const framePadding = Math.max(5, Math.floor(border * 0.1));
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(
        border - framePadding, 
        border - framePadding, 
        originalImg.width + framePadding * 2, 
        originalImg.height + framePadding * 2
    );
    
    // Draw original image
    ctx.drawImage(originalImg, border, border);

    // Apply a warm/vintage half-sepia filter to the image area
    const imgData = ctx.getImageData(border, border, originalImg.width, originalImg.height);
    const data = imgData.data;
    for(let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];
        
        // Sepia math
        const sepiaR = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
        const sepiaG = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
        const sepiaB = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
        
        // Blend original with sepia by 40% for a subtle nostalgic tint
        data[i] = r * 0.6 + sepiaR * 0.4;
        data[i+1] = g * 0.6 + sepiaG * 0.4;
        data[i+2] = b * 0.6 + sepiaB * 0.4;
    }
    ctx.putImageData(imgData, border, border);

    // Draw the text
    const fontSize = Math.max(40, Math.floor(border * 0.8));
    ctx.font = `${fontSize}px "Dancing Script", cursive`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    const textX = canvas.width / 2;
    const textY = canvas.height - (bottomSpace / 2);
    
    // Drop shadow
    ctx.fillStyle = '#ffffff'; 
    ctx.fillText(text, textX + 3, textY + 3);
    
    // Main text
    ctx.fillStyle = '#d14371'; // Dark raspberry pink
    ctx.fillText(text, textX, textY);

    return canvas;
}