Drag And Drop Movie Name Image Converter

function processImage(originalImg, movieTitle = "EPIC JOURNEY", director = "A FILM BY OPENAI", cinematicFilter = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0);
    
    // Apply a cinematic color grading (teal & orange) if enabled
    if (Number(cinematicFilter) === 1) {
        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imgData.data;
        for (let i = 0; i < data.length; i += 4) {
            let r = data[i];
            let g = data[i+1];
            let b = data[i+2];
            
            // Calculate luminance
            let luminance = 0.299 * r + 0.587 * g + 0.114 * b;
            
            if (luminance > 128) {
                // Highlights: boost red, reduce blue
                r = Math.min(255, r + (luminance - 128) * 0.5);
                b = Math.max(0, b - (luminance - 128) * 0.2);
            } else {
                // Shadows: boost blue, reduce red
                b = Math.min(255, b + (128 - luminance) * 0.5);
                r = Math.max(0, r - (128 - luminance) * 0.2);
            }
            
            // Enhance contrast slightly
            data[i] = Math.min(255, Math.max(0, (r - 128) * 1.2 + 128));
            data[i+1] = Math.min(255, Math.max(0, (g - 128) * 1.2 + 128));
            data[i+2] = Math.min(255, Math.max(0, (b - 128) * 1.2 + 128));
        }
        ctx.putImageData(imgData, 0, 0);
    }
    
    // Apply Letterboxing (Top & Bottom black bars for cinematic aspect ratio)
    const barHeight = canvas.height * 0.15;
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, canvas.width, barHeight); // Top bar
    ctx.fillRect(0, canvas.height - barHeight, canvas.width, barHeight); // Bottom bar
    
    // Apply a subtle vignette to focus attention to the center
    const outerRadius = Math.sqrt(Math.pow(canvas.width / 2, 2) + Math.pow(canvas.height / 2, 2));
    const gradient = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, canvas.height / 4, canvas.width / 2, canvas.height / 2, outerRadius);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.6)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, barHeight, canvas.width, canvas.height - (barHeight * 2));
    
    // Setup general text properties for the movie poster look
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    
    // Calculate adaptive font sizes
    const titleSize = Math.max(20, canvas.width * 0.08);
    const subSize = Math.max(10, canvas.width * 0.025);
    
    // --- Draw the Movie Title ---
    if ('letterSpacing' in ctx) {
        ctx.letterSpacing = `${canvas.width * 0.01}px`;
    }
    ctx.font = `bold ${titleSize}px "Arial Black", "Impact", sans-serif`;
    
    // Metallic/silver linear gradient for the title
    const textGrad = ctx.createLinearGradient(0, canvas.height - barHeight - titleSize, 0, canvas.height - barHeight);
    textGrad.addColorStop(0, '#ffffff');
    textGrad.addColorStop(1, '#a0a0a0');
    ctx.fillStyle = textGrad;
    
    const textY = canvas.height - barHeight - (titleSize * 0.7);
    ctx.fillText(movieTitle.toUpperCase(), canvas.width / 2, textY);
    
    // --- Draw the Director / Subtitle ---
    if ('letterSpacing' in ctx) {
        ctx.letterSpacing = `${canvas.width * 0.005}px`;
    }
    ctx.font = `bold ${subSize}px "Arial", sans-serif`;
    ctx.fillStyle = '#e0e0e0';
    ctx.fillText(director.toUpperCase(), canvas.width / 2, textY - (titleSize * 0.75));
    
    // --- Draw the "Billing Block" (small credits inside the bottom black bar) ---
    ctx.shadowColor = 'transparent'; // Remove shadows for the small text
    if ('letterSpacing' in ctx) {
        ctx.letterSpacing = '0px';
    }
    ctx.font = `${Math.max(6, canvas.height * 0.015)}px 'Trebuchet MS', Arial, sans-serif`;
    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'; // Faded gray
    
    const fakeBilling = "A JAVASCRIPT PRODUCTION IN ASSOCIATION WITH AI ASSISTANT  •  STARRING HTML CANVAS AND WEB API  •  DIRECTED BY YOU  •  PRODUCED BY ALGORITHM";
    
    // Make sure fake billing doesn't overflow
    ctx.fillText(fakeBilling, canvas.width / 2, canvas.height - (barHeight * 0.5), canvas.width * 0.95);
    
    return canvas;
}