Image Web Interface URL Viewer

function processImage(originalImg, url = "https://example.com/", theme = "light") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Top bar dimensions
    const barHeight = 50;
    
    // Setup canvas size
    canvas.width = originalImg.width;
    canvas.height = originalImg.height + barHeight;
    
    // Pre-calculate theme colors
    const isDark = theme.toLowerCase() === 'dark';
    const bgColor = isDark ? '#2d2d2d' : '#ececec';
    const addressBarColor = isDark ? '#1e1e1e' : '#ffffff';
    const textColor = isDark ? '#e3e3e3' : '#333333';
    const borderColor = isDark ? '#1a1a1a' : '#c9c9c9';
    
    // Draw top bar background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, barHeight);
    
    // Draw window buttons (Mac style controls)
    const radius = 6;
    const startX = 20;
    const spacing = 20;
    const centerY = barHeight / 2;
    
    // Only draw controls if there is enough space
    if (canvas.width > 90) {
        // Close (Red)
        ctx.beginPath();
        ctx.arc(startX, centerY, radius, 0, 2 * Math.PI);
        ctx.fillStyle = '#ff5f56';
        ctx.fill();
        
        // Minimize (Yellow)
        ctx.beginPath();
        ctx.arc(startX + spacing, centerY, radius, 0, 2 * Math.PI);
        ctx.fillStyle = '#ffbd2e';
        ctx.fill();
        
        // Maximize (Green)
        ctx.beginPath();
        ctx.arc(startX + spacing * 2, centerY, radius, 0, 2 * Math.PI);
        ctx.fillStyle = '#27c93f';
        ctx.fill();
    }
    
    // Draw Address Bar
    const addressBarHeight = 28;
    const maxAddressBarWidth = 600;
    let addressBarWidth = canvas.width - 200; // Leaving space for buttons and margins
    
    if (addressBarWidth > maxAddressBarWidth) {
        addressBarWidth = maxAddressBarWidth;
    }
    
    // Only draw address bar if we have a reasonable width
    if (addressBarWidth > 60 && canvas.width > 200) {
        const addressBarX = (canvas.width - addressBarWidth) / 2;
        const addressBarY = (barHeight - addressBarHeight) / 2;
        
        ctx.fillStyle = addressBarColor;
        
        // Custom path to draw rounded rectangle for maximum compatibility
        ctx.beginPath();
        const r = 6; // Corner radius
        ctx.moveTo(addressBarX + r, addressBarY);
        ctx.lineTo(addressBarX + addressBarWidth - r, addressBarY);
        ctx.quadraticCurveTo(addressBarX + addressBarWidth, addressBarY, addressBarX + addressBarWidth, addressBarY + r);
        ctx.lineTo(addressBarX + addressBarWidth, addressBarY + addressBarHeight - r);
        ctx.quadraticCurveTo(addressBarX + addressBarWidth, addressBarY + addressBarHeight, addressBarX + addressBarWidth - r, addressBarY + addressBarHeight);
        ctx.lineTo(addressBarX + r, addressBarY + addressBarHeight);
        ctx.quadraticCurveTo(addressBarX, addressBarY + addressBarHeight, addressBarX, addressBarY + addressBarHeight - r);
        ctx.lineTo(addressBarX, addressBarY + r);
        ctx.quadraticCurveTo(addressBarX, addressBarY, addressBarX + r, addressBarY);
        ctx.closePath();
        ctx.fill();
        
        // Setup font for URL
        ctx.fillStyle = textColor;
        ctx.font = '13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
        ctx.textBaseline = 'middle';
        
        // Clip area so text doesn't overflow outside the address bar
        ctx.save();
        ctx.beginPath();
        ctx.rect(addressBarX + 8, addressBarY, addressBarWidth - 16, addressBarHeight);
        ctx.clip();
        
        // Measure text for positioning text and lock icon
        const textWidth = ctx.measureText(url).width;
        const urlY = barHeight / 2;
        let urlX, lockX;
        
        // Determine whether to align left or center based on text length
        if (textWidth + 40 > addressBarWidth) {
            // Align left
            ctx.textAlign = 'left';
            urlX = addressBarX + 28;
            lockX = addressBarX + 14;
        } else {
            // Align center
            ctx.textAlign = 'center';
            urlX = canvas.width / 2;
            lockX = urlX - (textWidth / 2) - 12;
        }
        
        // Draw URL text
        ctx.fillText(url, urlX, urlY);
        
        // Draw lock icon next to text
        const lockColor = isDark ? '#aaaaaa' : '#666666';
        ctx.translate(lockX, urlY - 1);
        ctx.fillStyle = lockColor;
        ctx.strokeStyle = lockColor;
        ctx.lineWidth = 1.2;
        
        // Lock shackle
        ctx.beginPath();
        ctx.arc(0, 0, 2.5, Math.PI, 0);
        ctx.stroke();
        
        // Lock body
        ctx.beginPath();
        if (ctx.roundRect) {
            ctx.roundRect(-4, 0, 8, 6, 1.5);
        } else {
            ctx.rect(-4, 0, 8, 6);
        }
        ctx.fill();
        
        ctx.restore();
    }
    
    // Draw bottom border separator line of the top bar
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, barHeight - 1, canvas.width, 1);
    
    // Draw the original image right below the simulated web interface top bar
    ctx.drawImage(originalImg, 0, barHeight);
    
    return canvas;
}