Image Name Translator And Alphabet Generator

/**
 * Generates a name-like string from an image by mapping pixel data to characters of a given alphabet.
 * This process is deterministic based on the provided seed.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} [alphabet='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'] The set of characters to use for generating the name.
 * @param {number} [nameLength=16] The desired length of the generated name.
 * @param {number} [seed=0] A number to seed the random-like process, ensuring the same image and seed produce the same name.
 * @returns {HTMLElement} A div element containing the generated name, ready to be displayed.
 */
function processImage(originalImg, alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', nameLength = 16, seed = 0) {
    // --- 1. Sanitize and validate parameters ---
    if (typeof alphabet !== 'string' || alphabet.length === 0) {
        alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    }
    nameLength = Math.max(1, parseInt(nameLength, 10)) || 16;
    seed = parseInt(seed, 10) || 0;

    // --- 2. Setup canvas to read pixel data ---
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    let pixelData;
    try {
        pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    } catch (e) {
        console.error("Error reading image data:", e);
        const errorDiv = document.createElement('div');
        errorDiv.style.color = 'red';
        errorDiv.style.padding = '20px';
        errorDiv.textContent = 'Could not process the image. This may be due to cross-origin security restrictions. Please use an image from the same domain or one that allows cross-origin access.';
        return errorDiv;
    }

    // --- 3. Name Generation Logic ---
    let generatedName = '';
    const numPixels = canvas.width * canvas.height;
    let currentSeed = seed;

    // A simple Linear Congruential Generator (LCG) for pseudo-random number generation.
    // This makes the process deterministic based on the seed.
    const prng = () => {
        // Using parameters from Numerical Recipes, and bitwise AND for 32-bit unsigned int simulation.
        currentSeed = (currentSeed * 1664525 + 1013904223) & 0xFFFFFFFF;
        return currentSeed;
    };

    for (let i = 0; i < nameLength; i++) {
        // Select a "random" pixel using the PRNG
        const pixelIndex = prng() % numPixels;

        // Get the RGBA values for that pixel. Each pixel takes up 4 bytes (R, G, B, A).
        const dataIndex = pixelIndex * 4;
        const r = pixelData[dataIndex];
        const g = pixelData[dataIndex + 1];
        const b = pixelData[dataIndex + 2];
        const a = pixelData[dataIndex + 3];

        // Combine pixel data and the next PRNG state to create a value.
        // This ensures the mapping is complex and dependent on both the image and the seed sequence.
        // We include the alpha channel for more variance.
        const value = (r + g + b + a + prng()) % alphabet.length;

        generatedName += alphabet[value];
    }

    // --- 4. Create and style the output element ---
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'monospace, "Courier New", Courier';
    resultContainer.style.padding = '20px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.backgroundColor = '#f9f9f9';
    resultContainer.style.textAlign = 'center';
    resultContainer.style.maxWidth = '100%';
    resultContainer.style.boxSizing = 'border-box';

    const title = document.createElement('h3');
    title.textContent = 'Generated Alphabet Name:';
    title.style.marginBottom = '10px';
    title.style.color = '#333';
    title.style.fontWeight = 'normal';

    const nameElement = document.createElement('p');
    nameElement.textContent = generatedName;
    nameElement.style.fontSize = '1.5em';
    nameElement.style.fontWeight = 'bold';
    nameElement.style.color = '#0056b3';
    nameElement.style.wordBreak = 'break-all';
    nameElement.style.margin = '0';
    nameElement.title = 'Click to copy';
    nameElement.style.cursor = 'pointer';

    // Add a click-to-copy functionality for user convenience
    nameElement.onclick = () => {
        navigator.clipboard.writeText(generatedName).then(() => {
            const originalText = nameElement.textContent;
            nameElement.textContent = 'Copied!';
            setTimeout(() => {
                nameElement.textContent = originalText;
            }, 1000);
        }).catch(err => {
            console.error('Failed to copy text: ', err);
        });
    };


    resultContainer.appendChild(title);
    resultContainer.appendChild(nameElement);

    return resultContainer;
}