AI Powered Name Text Photo Movie Creator Tool

async function processImage(originalImg, mainTitle = "THE CINEMATIC", tagline = "AN AI POWERED EXPERIENCE") {
    // Setup Canvas
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Draw base image
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Apply Cinematic Color Grading (Teal / Orange effect)
    ctx.globalCompositeOperation = 'overlay';
    ctx.fillStyle = 'rgba(0, 40, 60, 0.4)'; // Teal cast for shadows and mids
    ctx.fillRect(0, 0, width, height);
    
    ctx.globalCompositeOperation = 'color';
    ctx.fillStyle = 'rgba(255, 140, 0, 0.1)'; // Warm orange highlights
    ctx.fillRect(0, 0, width, height);
    
    ctx.globalCompositeOperation = 'source-over'; // Reset to default

    // Dark Vignette around edges
    const centerGrad = ctx.createRadialGradient(width / 2, height / 2, height * 0.3, width / 2, height / 2, height * 0.9);
    centerGrad.addColorStop(0, 'rgba(0,0,0,0)');
    centerGrad.addColorStop(1, 'rgba(0,0,0,0.8)');
    ctx.fillStyle = centerGrad;
    ctx.fillRect(0, 0, width, height);

    // Fade to Black at the bottom for text readability
    const fadeGrad = ctx.createLinearGradient(0, height * 0.5, 0, height);
    fadeGrad.addColorStop(0, 'rgba(0,0,0,0)');
    fadeGrad.addColorStop(0.7, 'rgba(0,0,0,0.7)');
    fadeGrad.addColorStop(1, 'rgba(0,0,0,0.95)');
    ctx.fillStyle = fadeGrad;
    ctx.fillRect(0, 0, width, height);

    // Dynamically load a cinematic Google Font
    const fontName = 'Bebas Neue';
    if (!document.fonts.check(`12px "${fontName}"`)) {
        const link = document.createElement('link');
        link.href = 'https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap';
        link.rel = 'stylesheet';
        document.head.appendChild(link);
        
        try {
            await document.fonts.load(`12px "${fontName}"`);
        } catch (e) {
            console.warn("Font loading failed, falling back to system fonts.");
        }
    }
    const fallbackFont = 'Impact, sans-serif';
    const mainFont = document.fonts.check(`12px "${fontName}"`) ? `"${fontName}", ${fallbackFont}` : fallbackFont;

    ctx.textAlign = 'center';
    
    // Calculate and draw tagline (Subtitle)
    const taglineFontSize = Math.max(12, Math.floor(width * 0.025));
    ctx.font = `300 ${taglineFontSize}px Arial, sans-serif`;
    ctx.fillStyle = '#f39c12'; // Cinematic gold/orange
    if ('letterSpacing' in ctx) {
        ctx.letterSpacing = `${Math.floor(width * 0.008)}px`;
    }
    
    const titleBaseY = height * 0.85;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
    ctx.shadowBlur = Math.max(5, width * 0.01);
    ctx.fillText(tagline.toUpperCase(), width / 2, titleBaseY - (width * 0.08));

    // Calculate and draw Main Title
    if ('letterSpacing' in ctx) {
        ctx.letterSpacing = '0px'; // Reset for main title
    }
    let mainFontSize = Math.max(30, Math.floor(width * 0.15));
    ctx.font = `${mainFontSize}px ${mainFont}`;
    
    // Scale down text if it's too long to fit horizontally
    let textMetrics = ctx.measureText(mainTitle.toUpperCase());
    while (textMetrics.width > width * 0.9 && mainFontSize > 10) {
        mainFontSize -= 2;
        ctx.font = `${mainFontSize}px ${mainFont}`;
        textMetrics = ctx.measureText(mainTitle.toUpperCase());
    }

    ctx.fillStyle = '#ffffff';
    ctx.shadowColor = 'rgba(0, 0, 0, 1)';
    ctx.shadowBlur = Math.max(10, width * 0.02);
    ctx.shadowOffsetX = Math.max(2, width * 0.005);
    ctx.shadowOffsetY = Math.max(2, width * 0.005);
    ctx.fillText(mainTitle.toUpperCase(), width / 2, titleBaseY);

    // Mock Movie Credits at the very bottom
    const creditFontSize = Math.max(10, Math.floor(width * 0.012));
    ctx.font = `100 ${creditFontSize}px "Arial Narrow", Arial, sans-serif`;
    ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    
    if ('letterSpacing' in ctx) {
        ctx.letterSpacing = `${Math.floor(width * 0.004)}px`;
    }
    
    const credits = "PRODUCED BY AI  •  DIRECTED BY THE MAINFRAME  •  CINEMATOGRAPHY VIA NEURAL NETS  •  EDITED BY ALGORITHMS";
    
    // Scale credits if too long for standard display
    let creditMetrics = ctx.measureText(credits);
    let finalCredits = textMetrics.width < width * 0.95 ? credits : "PRODUCED BY AI  •  BASED ON NEURAL NETWORKS  •  EDITED BY ALGORITHMS";
    
    ctx.fillText(finalCredits, width / 2, height * 0.95);

    return canvas;
}