Favorite Brother Photo Tool

async function processImage(originalImg, text = "Любимый брат", backgroundColor = "#2c3e50", textColor = "#f1c40f") {
    // Dynamically load the 'Lobster' font from Google Fonts, which supports Cyrillic characters
    try {
        const fontName = "Lobster";
        const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName}&display=swap`;
        
        const link = document.createElement("link");
        link.href = fontUrl;
        link.rel = "stylesheet";
        document.head.appendChild(link);
        
        // Wait for the font to load so it renders correctly on the canvas
        await document.fonts.load(`400 20px "${fontName}"`);
    } catch (e) {
        console.warn("Failed to load Google Font, falling back to system fonts.", e);
    }

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

    // Scale down the original image if it's too large to maintain performance
    const MAX_DIMENSION = 1200;
    let imgWidth = originalImg.width;
    let imgHeight = originalImg.height;

    if (imgWidth > MAX_DIMENSION || imgHeight > MAX_DIMENSION) {
        const scaleRatio = Math.min(MAX_DIMENSION / imgWidth, MAX_DIMENSION / imgHeight);
        imgWidth = imgWidth * scaleRatio;
        imgHeight = imgHeight * scaleRatio;
    }

    // Determine layout paddings relative to the image size
    const maxDim = Math.max(imgWidth, imgHeight);
    const padding = maxDim * 0.05; 
    const bottomPadding = maxDim * 0.15;
    
    // Set final canvas dimensions (like a polaroid or greeting card)
    canvas.width = imgWidth + (padding * 2);
    canvas.height = imgHeight + padding + bottomPadding;

    // 1. Draw Background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw Image Border / Inner Frame
    const borderWidth = maxDim * 0.01;
    ctx.fillStyle = textColor;
    ctx.fillRect(
        padding - borderWidth, 
        padding - borderWidth, 
        imgWidth + (borderWidth * 2), 
        imgHeight + (borderWidth * 2)
    );

    // 3. Draw the Original Image
    ctx.drawImage(originalImg, padding, padding, imgWidth, imgHeight);

    // 4. Draw the Text ("Любимый брат")
    let fontSize = bottomPadding * 0.6;
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    
    // Adjust font size dynamically to ensure it fits within the canvas width
    do {
        ctx.font = `${fontSize}px "Lobster", cursive, sans-serif`;
        const metrics = ctx.measureText(text);
        if (metrics.width <= canvas.width * 0.9) {
            break;
        }
        fontSize -= 2;
    } while (fontSize > 12);

    // Add a slight drop shadow for aesthetic depth
    ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
    ctx.shadowBlur = 6;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    
    ctx.fillStyle = textColor;
    
    // Position text in the center of the bottom padding area
    const textX = canvas.width / 2;
    const textY = imgHeight + padding + (bottomPadding / 2);
    
    ctx.fillText(text, textX, textY);
    
    // Reset shadow state
    ctx.shadowColor = "transparent";
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    return canvas;
}