Image Signature Translator By Photo Alphabet

async function processImage(originalImg, text = 'SIGNATURE') {
    // This tool translates a text string into an image, where each character is
    // rendered to look like it's made from a photo-realistic texture.
    // The 'originalImg' parameter is not used in this implementation as the
    // tool's purpose is to generate an image from text and a pre-defined texture.

    // 1. A small, seamless, public domain wood texture encoded in Base64.
    // This keeps the function self-contained without external dependencies.
    const textureBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE_SURBVFhH7ZaxCsJgEIb9qCiIVnZ2FYILeAFvYvEWPAAP4FEEvYAn8OoFelHQRaQgtjo4W3pIEm2bZGGC80HyQuabzM/EDAClpaVpG/TSRaR6kpK8mRKMSs6ytr3vWtjzUaoOaq1m5N3cSHckpYh7Xyemqg6l2HCXo2d5eA19JbXEKtGqcZDAcS9vYc2j1JKaM6VcbDIcrsvbWe+pqkqp1A0Gg8vyljWeSS0xS1CqGI2G/nJb2PckJXmMUmEYjVbc5u19Dk+pJSbDIXkMxtf7vO2wGjRKSY5jMs9g9L7g8RqaUkIsA2c/p8MR2/8eZ00LSkk/o8EAh+s8XRWbFpSSnEeiweHKeCxcjpYFpRS/y9VgcHw2LscWpYElSQAAgCaUkvw8k2GxbVmzJgClpaVpB/0B202F6M4KxX0AAAAASUVORK5CYII=';

    const textureImg = new Image();
    const textureLoadPromise = new Promise((resolve, reject) => {
        textureImg.onload = () => resolve(textureImg);
        textureImg.onerror = () => reject(new Error('Failed to load internal texture image.'));
        textureImg.src = textureBase64;
    });

    try {
        await textureLoadPromise;
    } catch (error) {
        console.error(error);
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 400;
        errorCanvas.height = 100;
        const ctx = errorCanvas.getContext('2d');
        ctx.font = "16px Arial";
        ctx.fillStyle = 'red';
        ctx.textAlign = 'center';
        ctx.fillText('Error: Could not load the internal texture for rendering.', 200, 50);
        return errorCanvas;
    }

    // 2. Define constants for rendering and process the input text
    const letterHeight = 150; // The target height for each letter in pixels
    const font = `bold ${letterHeight}px Impact, 'Arial Black', sans-serif`;
    const spaceWidth = letterHeight * 0.3; // Define the width of a space character

    // Sanitize text to only include uppercase letters and spaces
    const cleanText = text.toUpperCase().replace(/[^A-Z ]/g, '');

    // 3. Prepare individual letter data (canvas, width) for compositing
    const letterData = [];
    let totalWidth = 0;

    // Use a temporary offscreen canvas to measure text accurately
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.font = font;

    const pattern = tempCtx.createPattern(textureImg, 'repeat');
    if (!pattern) {
        console.error("Failed to create canvas pattern from texture.");
        // Return an empty canvas as a fallback
        return document.createElement('canvas');
    }

    for (const char of cleanText) {
        if (char === ' ') {
            letterData.push({
                type: 'space',
                width: spaceWidth
            });
            totalWidth += spaceWidth;
            continue;
        }

        const metrics = tempCtx.measureText(char);
        const charWidth = Math.ceil(metrics.width);

        const letterCanvas = document.createElement('canvas');
        letterCanvas.width = charWidth;
        letterCanvas.height = letterHeight;
        const ctx = letterCanvas.getContext('2d');

        // Draw the character using the texture pattern
        ctx.font = font;
        ctx.fillStyle = pattern;
        ctx.textBaseline = 'alphabetic';
        
        // This y-coordinate is empirically chosen for good visual results with blocky,
        // all-caps fonts like Impact, placing the baseline near the canvas bottom.
        ctx.fillText(char, 0, letterHeight * 0.9);

        letterData.push({
            type: 'letter',
            canvas: letterCanvas,
            width: charWidth
        });
        totalWidth += charWidth;
    }

    // 4. Handle cases where the input text is empty or contains no valid characters
    if (totalWidth === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 500;
        emptyCanvas.height = letterHeight;
        const emptyCtx = emptyCanvas.getContext('2d');
        emptyCtx.font = "20px Arial";
        emptyCtx.fillStyle = '#888';
        emptyCtx.textAlign = 'center';
        emptyCtx.textBaseline = 'middle';
        emptyCtx.fillText("Please provide text with A-Z characters.", 250, letterHeight / 2);
        return emptyCanvas;
    }

    // 5. Create the final canvas and draw each letter/space onto it
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = totalWidth;
    finalCanvas.height = letterHeight;
    const finalCtx = finalCanvas.getContext('2d');

    let currentX = 0;
    for (const data of letterData) {
        if (data.type === 'letter') {
            finalCtx.drawImage(data.canvas, currentX, 0);
        }
        currentX += data.width;
    }

    // 6. Return the final, composite canvas element
    return finalCanvas;
}