Image URL Web Interface Tool

function processImage(originalImg, url = "https://example.com", theme = "light") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgW = originalImg.width || originalImg.naturalWidth;
    const imgH = originalImg.height || originalImg.naturalHeight;

    // Dynamically calculate header height based on image width, bounded to sensible values
    const headerHeight = Math.max(40, Math.min(100, Math.floor(imgW * 0.06)));
    
    canvas.width = imgW;
    canvas.height = imgH + headerHeight;

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Apply rounded top corners for the browser window to the canvas context
    const winRadius = headerHeight * 0.2;
    ctx.beginPath();
    ctx.moveTo(0, winRadius);
    ctx.quadraticCurveTo(0, 0, winRadius, 0);
    ctx.lineTo(canvas.width - winRadius, 0);
    ctx.quadraticCurveTo(canvas.width, 0, canvas.width, winRadius);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.closePath();
    ctx.clip();

    // Setup Theme Colors
    const isDark = (theme.toLowerCase().trim() === 'dark');
    const headerBgColor = isDark ? '#2D2D2D' : '#E0E0E0';
    const addressBarBgColor = isDark ? '#1A1A1A' : '#FFFFFF';
    const textColor = isDark ? '#CCCCCC' : '#333333';
    const imgBgColor = isDark ? '#121212' : '#FFFFFF';

    // Draw header background
    ctx.fillStyle = headerBgColor;
    ctx.fillRect(0, 0, canvas.width, headerHeight);

    // Draw OS-style window control buttons (red, yellow, green)
    const buttonRadius = headerHeight * 0.15;
    const buttonSpacing = buttonRadius * 3.5;
    const startX = headerHeight * 0.4;
    const centerY = headerHeight / 2;

    const colors = ['#FF5F56', '#FFBD2E', '#27C93F'];
    colors.forEach((color, index) => {
        ctx.beginPath();
        ctx.arc(startX + (index * buttonSpacing), centerY, buttonRadius, 0, 2 * Math.PI);
        ctx.fillStyle = color;
        ctx.fill();
    });

    // Calculate dimensions for the Address Bar
    const barHeight = headerHeight * 0.55;
    const maxBarWidth = imgW - (startX + 3 * buttonSpacing) - 40;
    const barWidth = Math.min(imgW * 0.6, maxBarWidth > 0 ? maxBarWidth : imgW * 0.5);
    const barX = (imgW - barWidth) / 2;
    const barY = (headerHeight - barHeight) / 2;
    const cornerRadius = barHeight * 0.25;

    // Helper function to draw rounded rectangles
    const traceRoundRect = (x, y, w, h, r) => {
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h - r);
        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
        ctx.lineTo(x + r, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.closePath();
    };

    // Draw Address Bar
    ctx.fillStyle = addressBarBgColor;
    traceRoundRect(barX, barY, barWidth, barHeight, cornerRadius);
    ctx.fill();

    // Formatting Text
    ctx.fillStyle = textColor;
    const fontSize = Math.max(10, Math.floor(barHeight * 0.45));
    ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Save state and clip inner area to prevent long URLs from overflowing
    ctx.save();
    traceRoundRect(barX, barY, barWidth, barHeight, cornerRadius);
    ctx.clip();
    
    // Adjust y by +1 or +2 to achieve absolute vertical center optically
    ctx.fillText(url, barX + barWidth / 2, barY + barHeight / 2 + 1);
    ctx.restore();

    // Fill the image area background in case the original image has partial transparency
    ctx.fillStyle = imgBgColor;
    ctx.fillRect(0, headerHeight, canvas.width, canvas.height - headerHeight);

    // Draw original image
    ctx.drawImage(originalImg, 0, headerHeight, imgW, imgH);

    // Draw a subtle separator line under the browser header
    ctx.strokeStyle = isDark ? '#111111' : '#CCCCCC';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, headerHeight - 0.5);
    ctx.lineTo(canvas.width, headerHeight - 0.5);
    ctx.stroke();

    return canvas;
}