Image Pseudonym Generator

function processImage(originalImg, customName = "", fontColor = "#FFFFFF", bannerColor = "rgba(0, 0, 0, 0.65)", fontSize = 48, placement = "bottom") {
    // Create a new canvas to draw the image safely
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

    // Draw the original image onto the canvas 
    // Note: Re-drawing to a canvas implicitly removes EXIF metadata, acting as a structural anonymizer 
    ctx.drawImage(originalImg, 0, 0);

    // Dictionaries for generating pseudo-random names based on image characteristics
    const adjectives = [
        'Silent', 'Neon', 'Crimson', 'Azure', 'Golden', 'Shadow', 'Crystal', 'Iron', 
        'Velvet', 'Electric', 'Cosmic', 'Mystic', 'Silver', 'Jade', 'Solar', 'Lunar', 
        'Cyber', 'Quantum', 'Phantom', 'Ethereal'
    ];
    const nouns = [
        'Fox', 'Raven', 'Phantom', 'Dragon', 'Wolf', 'Tiger', 'Voyager', 'Nomad', 
        'Sphinx', 'Griffin', 'Ghost', 'Serpent', 'Owl', 'Bear', 'Falcon', 'Panther', 
        'Ninja', 'Specter', 'Wanderer', 'Oracle'
    ];

    let sum1 = originalImg.width * 31;
    let sum2 = originalImg.height * 17;

    try {
        // Sample image colors (scale down drastically for performance) to generate deterministic, image-specific pseudonym
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 10;
        tempCanvas.height = 10;
        const tCtx = tempCanvas.getContext('2d');
        tCtx.drawImage(originalImg, 0, 0, 10, 10);
        const data = tCtx.getImageData(0, 0, 10, 10).data;
        
        for (let i = 0; i < data.length; i += 4) {
            sum1 += data[i] + data[i + 2];     // R + B
            sum2 += data[i + 1] + data[i + 3]; // G + A
        }
    } catch(e) {
        // Fallback uses the width and height calculations if getImageData fails due to cross-origin limitations
        sum1 += originalImg.width * 101;
        sum2 += originalImg.height * 73;
    }

    // Pick words based on deterministic sums calculated from the image
    const adj = adjectives[sum1 % adjectives.length];
    const noun = nouns[sum2 % nouns.length];
    
    // Choose between user's custom text or the generated pseudonym
    const pseudo = customName && customName.trim() !== "" ? customName : `Alias: ${adj} ${noun}`;

    // Calculate font and banner sizing constraints so it fits nicely
    let finalFontSize = Number(fontSize);
    let padding = finalFontSize * 0.6;
    ctx.font = `bold ${finalFontSize}px "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
    let textWidth = ctx.measureText(pseudo).width;

    // Scale font down if it's wider than the image bounds
    while (textWidth > canvas.width - (padding * 2) && finalFontSize > 10) {
        finalFontSize -= 2;
        padding = finalFontSize * 0.6;
        ctx.font = `bold ${finalFontSize}px "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
        textWidth = ctx.measureText(pseudo).width;
    }

    const bannerHeight = finalFontSize + (padding * 2);

    // Determine Y coordinate based on placement string parameter
    let bannerY;
    if (placement.toLowerCase() === "top") {
        bannerY = 0;
    } else if (placement.toLowerCase() === "center") {
        bannerY = (canvas.height - bannerHeight) / 2;
    } else {
        // Defaults to bottom
        bannerY = canvas.height - bannerHeight;
    }

    // Draw background banner
    ctx.fillStyle = bannerColor;
    ctx.fillRect(0, bannerY, canvas.width, bannerHeight);

    // Draw the pseudonym text
    ctx.fillStyle = fontColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    
    // Add a slight vertical offset adjustment to look optically centered
    const textCenterY = bannerY + (bannerHeight / 2) + Math.max(2, finalFontSize * 0.05); 
    
    // Apply subtle shadow for better readability
    ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
    ctx.shadowBlur = Math.max(2, finalFontSize * 0.1);
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;

    ctx.fillText(pseudo, canvas.width / 2, textCenterY);

    return canvas;
}