Image Alphabet Creator Using AI Draw And Translator

/**
 * Creates an "Image Alphabet" by rendering a string of characters,
 * using the provided image as a texture for the text.
 * A contrasting stroke is added for visibility, creating an artistic, "AI draw" style effect.
 *
 * @param {Image} originalImg The source JavaScript Image object.
 * @param {string} [alphabetString='ABCDEFGHIJKLMNOPQRSTUVWXYZ'] The string of characters to generate.
 * @param {number} [fontSize=80] The size of the letters in pixels.
 * @param {string} [fontFamily='Impact'] The CSS font family. A bold, blocky font is recommended.
 * @param {number} [columns=7] The number of columns in the grid layout.
 * @param {number} [strokeWidth=4] The width of the outline around each letter. Set to 0 to disable.
 * @returns {HTMLCanvasElement} A canvas element displaying the generated image alphabet.
 */
function processImage(
    originalImg,
    alphabetString = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    fontSize = 80,
    fontFamily = 'Impact',
    columns = 7,
    strokeWidth = 4
) {
    /**
     * Helper function to get the average color of an image and determine if it's dark.
     * This is used to select a contrasting color for the text stroke.
     * @param {Image} img The image to analyze.
     * @returns {{color: string, isDark: boolean}} The average color and a darkness flag.
     */
    const getAverageColorInfo = (img) => {
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        const tempCtx = tempCanvas.getContext('2d');
        if (!tempCtx) return { color: '#808080', isDark: false };
        
        tempCtx.drawImage(img, 0, 0, 1, 1);
        try {
            const [r, g, b] = tempCtx.getImageData(0, 0, 1, 1).data;
            // Calculate luminance using the standard formula to determine if the color is dark.
            const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
            return {
                color: `rgb(${r}, ${g}, ${b})`,
                isDark: luminance < 128
            };
        } catch (e) {
            console.error("Could not get image data, possibly due to CORS policy on the source image.");
            return { color: '#808080', isDark: false }; // Return a default grey on error
        }
    };

    const charCount = alphabetString.length;
    
    // Handle empty input string by returning a minimal canvas.
    if (charCount === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        return emptyCanvas;
    }

    // 1. Precisely measure characters to determine cell size for a clean layout
    const measureCanvas = document.createElement('canvas');
    const measureCtx = measureCanvas.getContext('2d');
    const font = `bold ${fontSize}px ${fontFamily}, sans-serif`;
    measureCtx.font = font;
    
    let maxCharWidth = 0;
    for (const char of alphabetString) {
        const metrics = measureCtx.measureText(char);
        if (metrics.width > maxCharWidth) {
            maxCharWidth = metrics.width;
        }
    }

    // 2. Calculate final canvas dimensions based on measurements
    const padding = Math.ceil(fontSize * 0.2);
    const cellWidth = maxCharWidth + strokeWidth * 2;
    const cellHeight = fontSize + strokeWidth * 2;
    
    const finalColumns = Math.min(columns, charCount);
    const rows = Math.ceil(charCount / finalColumns);

    const canvas = document.createElement('canvas');
    canvas.width = finalColumns * cellWidth + (finalColumns + 1) * padding;
    canvas.height = rows * cellHeight + (rows + 1) * padding;
    const ctx = canvas.getContext('2d');

    // 3. Draw a neutral background
    ctx.fillStyle = '#f0f0f0';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 4. Create the fill pattern from the original image
    const pattern = ctx.createPattern(originalImg, 'repeat');
    const avgColorInfo = getAverageColorInfo(originalImg);
    
    if (!pattern) {
        // Fallback to the image's average color if pattern creation fails.
        console.error("Could not create pattern from image. Falling back to average color.");
        ctx.fillStyle = avgColorInfo.color;
    } else {
        ctx.fillStyle = pattern;
    }

    // 5. Set up text rendering properties
    ctx.font = font;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Set stroke style to contrast with the image's average color
    ctx.strokeStyle = avgColorInfo.isDark ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)';
    ctx.lineWidth = strokeWidth;
    ctx.lineJoin = 'round'; // For smoother stroke corners

    // 6. Loop through the string and draw each character in its grid cell
    for (let i = 0; i < charCount; i++) {
        const char = alphabetString[i];
        const col = i % finalColumns;
        const row = Math.floor(i / finalColumns);

        // Calculate the center coordinates for the character inside its cell
        const x = padding + col * (cellWidth + padding) + cellWidth / 2;
        const y = padding + row * (cellHeight + padding) + cellHeight / 2;
        
        // Draw the stroke (outline) first for a clean layering effect
        if (strokeWidth > 0) {
            ctx.strokeText(char, x, y);
        }
        // Draw the main text filled with the image pattern
        ctx.fillText(char, x, y);
    }

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