Image To Video Platform Name Generator

function processImage(originalImg, customName = "", themeColor = "#FF0000", watermarkPosition = "bottom-right") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Determine dimensions based on the original image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

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

    // Platform Name Logic setup (Split into 2 parts for a two-toned logo appearance)
    let part1 = "";
    let part2 = "";

    if (customName && customName.trim().length > 0) {
        const words = customName.trim().split(" ");
        if (words.length > 1) {
            part1 = words[0];
            part2 = words.slice(1).join(" ");
        } else {
            const mid = Math.ceil(customName.length / 2);
            part1 = customName.substring(0, mid);
            part2 = customName.substring(mid);
        }
    } else {
        // Generate a fictional layout if no custom context is provided
        const prefixes = ['Stream', 'Vid', 'Play', 'Cine', 'Pixel', 'Echo', 'Vibe', 'Nex', 'Nova', 'Aero', 'View', 'Net'];
        const suffixes = ['Tube', 'Flix', 'Cast', 'Hub', 'Max', 'Plus', 'Wave', 'Sync', 'TV', 'Pop', 'Vids', 'Live'];
        
        // A pseudo-random index based on dimensions for deterministic output for the same image
        const seed1 = (width * 3 + height * 7) % prefixes.length;
        const seed2 = (width * 7 + height * 3) % suffixes.length;
        
        part1 = prefixes[seed1];
        part2 = suffixes[seed2];
    }

    // Typography setup
    const fontSize = Math.max(16, Math.floor(width * 0.035));
    ctx.font = `900 ${fontSize}px "Segoe UI", "Helvetica Neue", Arial, sans-serif`;
    ctx.textBaseline = "middle";

    const p1Width = ctx.measureText(part1).width;
    const p2Width = ctx.measureText(part2).width;
    const totalTextWidth = p1Width + p2Width;

    // Logo layout padding and sizing
    const padding = fontSize * 0.6;
    const iconSize = fontSize * 0.85;
    const bgWidth = totalTextWidth + iconSize + (padding * 3.5);
    const bgHeight = fontSize * 2.2;

    let x = 0;
    let y = 0;

    // Position setup using the requested placement options
    const margin = Math.max(10, width * 0.02);
    switch (watermarkPosition.toLowerCase()) {
        case 'top-left':
            x = margin;
            y = margin;
            break;
        case 'top-right':
            x = width - bgWidth - margin;
            y = margin;
            break;
        case 'bottom-left':
            x = margin;
            y = height - bgHeight - margin;
            break;
        case 'bottom-right':
        default:
            x = width - bgWidth - margin;
            y = height - bgHeight - margin;
            break;
    }

    // Draw the rounded pill-shaped background
    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
    const radius = bgHeight / 2;
    
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + bgWidth - radius, y);
    ctx.quadraticCurveTo(x + bgWidth, y, x + bgWidth, y + radius);
    ctx.lineTo(x + bgWidth, y + bgHeight - radius);
    ctx.quadraticCurveTo(x + bgWidth, y + bgHeight, x + bgWidth - radius, y + bgHeight);
    ctx.lineTo(x + radius, y + bgHeight);
    ctx.quadraticCurveTo(x, y + bgHeight, x, y + bgHeight - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    ctx.fill();

    // Draw Play Button Icon
    const iconX = x + padding;
    const iconY = y + bgHeight / 2 - iconSize / 2;
    
    ctx.fillStyle = themeColor;
    ctx.beginPath();
    ctx.moveTo(iconX, iconY);
    ctx.lineTo(iconX, iconY + iconSize);
    ctx.lineTo(iconX + iconSize * 0.85, iconY + iconSize / 2);
    ctx.closePath();
    ctx.fill();

    // Render Text Parts
    const textStartX = iconX + iconSize + padding * 0.6;
    const textY = y + bgHeight / 2 + (fontSize * 0.05); // Minor manual optical baseline tweak
    
    // First part: White text
    ctx.fillStyle = "#FFFFFF";
    ctx.fillText(part1, textStartX, textY);
    
    // Second part: Rendered in the provided theme brand color
    ctx.fillStyle = themeColor;
    ctx.fillText(part2, textStartX + p1Width, textY);

    return canvas;
}