Image CD Cover Template Generator

async function processImage(
    originalImg,
    albumTitle = "Album Title",
    artistName = "Artist Name",
    fontFamily = "Arial",
    titleFontSize = 48, // px
    artistFontSize = 32, // px
    textColor = "white"
) {
    const CANVAS_SIZE = 600; // Output canvas size (square for CD cover)
    const canvas = document.createElement('canvas');
    canvas.width = CANVAS_SIZE;
    canvas.height = CANVAS_SIZE;
    const ctx = canvas.getContext('2d');

    /**
     * Helper function to draw text that auto-scales its font size to fit a max width.
     * It also attempts to ensure the font is loaded before drawing.
     * Returns the actual font size used, or S0 if the text is empty.
     */
    async function drawTextWithAutoScale(
        context,
        text,
        desiredFontSize,
        baseFontFamily,
        color,
        targetX,
        targetY,
        maxWidth,
        textBaseline = "bottom"
    ) {
        if (!text || text.trim() === "") {
            return 0; // No height consumed by empty text
        }

        let currentFontSize = desiredFontSize;
        const fullFontFamily = `${baseFontFamily}, sans-serif`; // Append generic fallback

        // Determine font size based on text width and maxWidth
        // This loop does not await font loading for performance during scaling calculation.
        // It relies on browser's metrics for potentially unloaded fonts (usually good enough).
        context.font = `${currentFontSize}px ${fullFontFamily}`;
        let textMetrics = context.measureText(text);

        while (textMetrics.width > maxWidth && currentFontSize > 10) { // Min font size 10px
            currentFontSize--;
            context.font = `${currentFontSize}px ${fullFontFamily}`;
            textMetrics = context.measureText(text);
        }

        const finalFontString = `${currentFontSize}px ${fullFontFamily}`;

        // Attempt to load the font if document.fonts API is available
        if (typeof document !== 'undefined' && document.fonts) {
            try {
                await document.fonts.load(finalFontString);
            } catch (e) {
                console.warn(`Font ${finalFontString} could not be loaded or_timed out:`, e);
                // Execution will continue; browser might use a fallback font.
            }
        }
        
        // Set final font properties and draw
        context.font = finalFontString; 
        context.fillStyle = color;
        context.textAlign = "center";
        context.textBaseline = textBaseline;
        context.fillText(text, targetX, targetY);
        
        return currentFontSize; // Return the actual font size used (for layout)
    }

    // Draw background or fallback if image is invalid/not loaded
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.warn("Original image is not loaded or invalid. Drawing a fallback background.");
        ctx.fillStyle = '#333333'; // Dark gray fallback
        ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
    } else {
        // Draw the image, making it cover the square canvas (cropping if necessary)
        const imgNatWidth = originalImg.naturalWidth;
        const imgNatHeight = originalImg.naturalHeight;
        const canvasAspect = 1; // CANVAS_SIZE / CANVAS_SIZE is 1 for a square

        let sx = 0, sy = 0, sWidth = imgNatWidth, sHeight = imgNatHeight;

        // Calculate source image crop area (sx, sy, sWidth, sHeight)
        // to make it fit the square canvas aspect ratio by covering it.
        if (imgNatWidth / imgNatHeight > canvasAspect) { // Image is wider than target aspect
            sWidth = imgNatHeight * canvasAspect; // Crop width
            sx = (imgNatWidth - sWidth) / 2;     // Center horizontally
        } else if (imgNatWidth / imgNatHeight < canvasAspect) { // Image is taller than target aspect
            sHeight = imgNatWidth / canvasAspect; // Crop height
            sy = (imgNatHeight - sHeight) / 2;    // Center vertically
        }
        // If aspect ratios match, sx, sy, sWidth, sHeight remain full image dimensions.

        ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, CANVAS_SIZE, CANVAS_SIZE);
    }

    // --- Text Drawing ---
    const textMaxWidth = CANVAS_SIZE - 40; // Max width for text (20px padding each side)
    const bottomMargin = 30;               // Px from canvas bottom for the lowest text
    const textBlockSpacing = 10;           // Px vertical spacing between title and artist

    let actualArtistFontHeight = 0;
    if (artistName && artistName.trim() !== "") {
        actualArtistFontHeight = await drawTextWithAutoScale(
            ctx,
            artistName,
            artistFontSize,
            fontFamily,
            textColor,
            CANVAS_SIZE / 2,                // Centered horizontally
            CANVAS_SIZE - bottomMargin,     // Positioned from bottom
            textMaxWidth
        );
    }

    if (albumTitle && albumTitle.trim() !== "") {
        // Calculate Y position for album title
        // If artist name was drawn, place title above it, otherwise, title is at artist's position.
        const titleY = CANVAS_SIZE - bottomMargin - 
                       (actualArtistFontHeight > 0 ? actualArtistFontHeight + textBlockSpacing : 0);
        
        await drawTextWithAutoScale(
            ctx,
            albumTitle,
            titleFontSize,
            fontFamily,
            textColor,
            CANVAS_SIZE / 2, // Centered horizontally
            titleY,          // Positioned above artist or at artist's baseline
            textMaxWidth
        );
    }

    return canvas;
}