Image Movie Logo Creator

async function processImage(originalImg, topText = "CINEMATIC TITLE", bottomText = "FROM THE PRODUCERS OF AWESOME", fontName = "Bebas Neue", textColor = "#FFFFFF", backgroundColor = "#000000", imageEffect = "none") {
    /**
     * Dynamically loads a Google Font by injecting a stylesheet and waiting for it to be ready.
     * This prevents a race condition where the canvas is drawn before the font is available.
     * @param {string} fontName The name of the Google Font to load.
     */
    const loadFont = async (fontName) => {
        const uniqueFontId = 'font-loader-' + fontName.replace(/\s/g, '-');
        if (document.getElementById(uniqueFontId)) {
            // Font stylesheet is already added, assume it's loaded or loading.
            return;
        }

        const style = document.createElement('style');
        style.id = uniqueFontId;
        style.innerHTML = `@import url('https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, '+')}&display=swap');`;
        document.head.appendChild(style);

        try {
            // Wait for the font to be ready. '10px' is an arbitrary size for the check.
            await document.fonts.load(`10px "${fontName}"`);
        } catch (e) {
            console.error(`Could not load font: ${fontName}. The browser will use a fallback font.`, e);
        }
    };

    // 1. Ensure the specified font is loaded.
    await loadFont(fontName);

    // 2. Define layout and dimensions.
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Set canvas dimensions with padding. Using a wider canvas creates a cinematic feel.
    const canvasWidth = imgWidth * 1.6;

    // Calculate dynamic font sizes and spacing based on the canvas width.
    const topFontSize = Math.round(canvasWidth * 0.1);
    const bottomFontSize = Math.round(canvasWidth * 0.04);
    const verticalMargin = Math.round(canvasWidth * 0.05);
    const textImageSpacing = Math.round(canvasWidth * 0.03);

    // Calculate the total height required for all elements.
    const canvasHeight = (verticalMargin * 2) + topFontSize + bottomFontSize + (textImageSpacing * 2) + imgHeight;

    // 3. Create canvas and get 2D context.
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // 4. Draw the background.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 5. Draw the image (with optional effect).
    ctx.save(); // Save context state before applying filters.
    if (imageEffect === 'grayscale') {
        ctx.filter = 'grayscale(100%)';
    } else if (imageEffect === 'sepia') {
        ctx.filter = 'sepia(100%)';
    }
    // Calculate image position to center it.
    const imgX = (canvas.width - imgWidth) / 2;
    const imgY = verticalMargin + topFontSize + textImageSpacing;
    ctx.drawImage(originalImg, imgX, imgY, imgWidth, imgHeight);
    ctx.restore(); // Restore context to remove the filter for subsequent drawing.

    // 6. Draw the text.
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle'; // Aligns text vertically to its center.

    // Draw Top Text (main title).
    // Use a bold weight for the main title for more impact.
    ctx.font = `bold ${topFontSize}px "${fontName}", sans-serif`;
    const topTextY = verticalMargin + (topFontSize / 2);
    ctx.fillText(topText.toUpperCase(), canvas.width / 2, topTextY);

    // Draw Bottom Text (tagline).
    ctx.font = `${bottomFontSize}px "${fontName}", sans-serif`;
    const bottomTextY = imgY + imgHeight + textImageSpacing + (bottomFontSize / 2);
    ctx.fillText(bottomText.toUpperCase(), canvas.width / 2, bottomTextY);

    // 7. Return the final canvas element.
    return canvas;
}