AI Studio Company Year Image Identifier Generator

function processImage(
    originalImg,
    companyName = "AI VISION STUDIO",
    year = "2024",
    identifier = "GEN-01-A",
    position = "bottom-right",
    boxOpacity = "0.8",
    themeColor = "#00ffcc"
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Maintain original dimensions
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the underlying image
    ctx.drawImage(originalImg, 0, 0);

    // Dynamic sizing based on image dimensions
    const minDimension = Math.min(canvas.width, canvas.height);
    // Base font size scaling with bounds
    const fontSize = Math.max(12, Math.floor(minDimension * 0.025));
    
    // Padding and layout calculation
    const paddingX = Math.round(fontSize * 1.2);
    const paddingY = Math.round(fontSize * 0.9);

    // Format text
    const line1Text = companyName.toUpperCase();
    const line2Text = `[ EST. ${year} ]  ID:${identifier}`;

    // Web-safe monospace fonts for a technical/generator aesthetic
    const fontPrimary = `bold ${fontSize}px "Courier New", Courier, monospace`;
    const fontSecondary = `${Math.floor(fontSize * 0.85)}px "Courier New", Courier, monospace`;

    // Measure text to determine container bounds
    ctx.font = fontPrimary;
    const width1 = ctx.measureText(line1Text).width;
    
    ctx.font = fontSecondary;
    const width2 = ctx.measureText(line2Text).width;

    // Container dimensions
    const contentWidth = Math.max(width1, width2);
    const boxWidth = contentWidth + (paddingX * 2);
    const boxHeight = (fontSize * 2.4) + (paddingY * 2);

    // Positioning offset
    const edgeMargin = Math.max(10, Math.floor(minDimension * 0.02));
    let startX = 0;
    let startY = 0;

    switch (position.toLowerCase()) {
        case 'top-left':
            startX = edgeMargin;
            startY = edgeMargin;
            break;
        case 'top-right':
            startX = canvas.width - boxWidth - edgeMargin;
            startY = edgeMargin;
            break;
        case 'bottom-left':
            startX = edgeMargin;
            startY = canvas.height - boxHeight - edgeMargin;
            break;
        case 'bottom-right':
        default:
            startX = canvas.width - boxWidth - edgeMargin;
            startY = canvas.height - boxHeight - edgeMargin;
            break;
    }

    // 1. Draw Background Container (Rounded Glassmorphism/Dark style)
    const opacity = Math.min(1, Math.max(0, parseFloat(boxOpacity) || 0.8));
    ctx.fillStyle = `rgba(15, 15, 20, ${opacity})`;
    
    const borderRadius = fontSize * 0.4;
    ctx.beginPath();
    ctx.moveTo(startX + borderRadius, startY);
    ctx.lineTo(startX + boxWidth - borderRadius, startY);
    ctx.quadraticCurveTo(startX + boxWidth, startY, startX + boxWidth, startY + borderRadius);
    ctx.lineTo(startX + boxWidth, startY + boxHeight - borderRadius);
    ctx.quadraticCurveTo(startX + boxWidth, startY + boxHeight, startX + boxWidth - borderRadius, startY + boxHeight);
    ctx.lineTo(startX + borderRadius, startY + boxHeight);
    ctx.quadraticCurveTo(startX, startY + boxHeight, startX, startY + boxHeight - borderRadius);
    ctx.lineTo(startX, startY + borderRadius);
    ctx.quadraticCurveTo(startX, startY, startX + borderRadius, startY);
    ctx.closePath();
    ctx.fill();

    // 2. Draw Theme Border and Accents
    ctx.lineWidth = Math.max(1, fontSize * 0.1);
    ctx.strokeStyle = themeColor;
    ctx.stroke();
    
    // Left edge bold accent strip
    ctx.fillStyle = themeColor;
    ctx.fillRect(startX, startY + (boxHeight * 0.25), Math.max(3, fontSize * 0.2), boxHeight * 0.5);

    // 3. Draw Text Content
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';

    // Primary Line (Company Studio)
    ctx.font = fontPrimary;
    ctx.fillStyle = '#ffffff';
    ctx.fillText(line1Text, startX + paddingX, startY + paddingY);

    // Secondary Line (Year & ID)
    ctx.font = fontSecondary;
    ctx.fillStyle = '#b0b0b0'; 
    ctx.fillText(line2Text, startX + paddingX, startY + paddingY + fontSize * 1.3);

    // 4. Draw Status/Tech Dot Accent
    const dotRadius = fontSize * 0.12;
    const text2Width = ctx.measureText(line2Text).width;
    const dotCenterY = startY + paddingY + fontSize * 1.3 + (fontSize * 0.85) / 2;
    
    ctx.fillStyle = themeColor;
    ctx.beginPath();
    ctx.arc(startX + paddingX + text2Width + fontSize * 0.6, dotCenterY, dotRadius, 0, Math.PI * 2);
    ctx.fill();
    
    // Subtle glow around dot
    ctx.shadowColor = themeColor;
    ctx.shadowBlur = dotRadius * 3;
    ctx.fill();
    ctx.shadowBlur = 0; // Reset shadow

    return canvas;
}