Image Website Interface Address Tool Creator

function processImage(originalImg, url = "https://www.example.com", theme = "light", browserType = "mac", bgPadding = 40) {
    // Standardize inputs
    bgPadding = Number(bgPadding) || 0;
    const isDark = theme.toLowerCase() === 'dark';
    const isWindows = browserType.toLowerCase() === 'windows';

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine dimensions
    const minWidth = 400;
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    const finalWidth = Math.max(imgWidth, minWidth);
    const topBarHeight = 60;
    const finalHeight = imgHeight + topBarHeight;

    canvas.width = finalWidth + bgPadding * 2;
    canvas.height = finalHeight + bgPadding * 2;

    // Colors
    const topBarColor = isDark ? '#2D2D2D' : '#F1F1F1';
    const urlBarColor = isDark ? '#1A1A1A' : '#FFFFFF';
    const textColor = isDark ? '#FFFFFF' : '#333333';
    const bodyBgColor = isDark ? '#121212' : '#FFFFFF';

    // Helper to draw rounded rectangles
    function drawRoundRect(context, x, y, width, height, radius) {
        context.beginPath();
        context.moveTo(x + radius, y);
        context.lineTo(x + width - radius, y);
        context.quadraticCurveTo(x + width, y, x + width, y + radius);
        context.lineTo(x + width, y + height - radius);
        context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        context.lineTo(x + radius, y + height);
        context.quadraticCurveTo(x, y + height, x, y + height - radius);
        context.lineTo(x, y + radius);
        context.quadraticCurveTo(x, y, x + radius, y);
        context.closePath();
    }

    ctx.save();

    // 1. Draw Drop Shadow and Base Shape
    ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetY = 10;
    
    drawRoundRect(ctx, bgPadding, bgPadding, finalWidth, finalHeight, 10);
    ctx.fillStyle = bodyBgColor;
    ctx.fill();
    
    // 2. Turn off shadow and clip canvas to the browser frame
    ctx.shadowColor = 'transparent';
    ctx.clip(); 

    // 3. Draw Top Bar
    ctx.fillStyle = topBarColor;
    ctx.fillRect(bgPadding, bgPadding, finalWidth, topBarHeight);

    // Divider Line
    ctx.strokeStyle = isDark ? '#111111' : '#DDDDDD';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(bgPadding, bgPadding + topBarHeight);
    ctx.lineTo(bgPadding + finalWidth, bgPadding + topBarHeight);
    ctx.stroke();

    // 4. Draw Image Content
    // Center it if the image is narrower than finalWidth (e.g. minWidth boundary condition)
    const imgX = bgPadding + (finalWidth - imgWidth) / 2;
    const imgY = bgPadding + topBarHeight;
    ctx.fillStyle = bodyBgColor;
    ctx.fillRect(bgPadding, imgY, finalWidth, imgHeight); // Solid background behind image
    ctx.drawImage(originalImg, imgX, imgY, imgWidth, imgHeight);

    // 5. Setup controls & URL Bar layouts
    const urlBarHeight = 30;
    const urlBarY = bgPadding + (topBarHeight - urlBarHeight) / 2;
    let urlBarX = bgPadding + 80;
    let urlBarWidth = finalWidth - 160;
    let textX = finalWidth / 2 + bgPadding;
    let textY = bgPadding + topBarHeight / 2;
    let textAlign = 'center';

    if (isWindows) {
        // Windows style layout: URL bar shifting left, controls right
        urlBarX = bgPadding + 20;
        urlBarWidth = finalWidth - 120;
        textX = urlBarX + 15;
        textAlign = 'left';

        // Draw Windows Controls (Minimize, Maximize, Close)
        ctx.strokeStyle = textColor;
        ctx.lineWidth = 1;
        const rightEdge = bgPadding + finalWidth;
        const btnY = bgPadding + 25;
        // Close (X)
        ctx.beginPath(); ctx.moveTo(rightEdge-20, btnY); ctx.lineTo(rightEdge-10, btnY+10); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(rightEdge-10, btnY); ctx.lineTo(rightEdge-20, btnY+10); ctx.stroke();
        // Maximize (Square)
        ctx.strokeRect(rightEdge-45, btnY, 10, 10);
        // Minimize (Line)
        ctx.beginPath(); ctx.moveTo(rightEdge-70, btnY+5); ctx.lineTo(rightEdge-60, btnY+5); ctx.stroke();
    } else {
        // Mac style layout: Controls left, URL bar center
        const colors = ['#FF5F56', '#FFBD2E', '#27C93F'];
        colors.forEach((col, i) => {
            ctx.fillStyle = col;
            ctx.beginPath();
            ctx.arc(bgPadding + 20 + i * 20, bgPadding + topBarHeight / 2, 6, 0, Math.PI * 2);
            ctx.fill();
        });
    }

    // 6. Draw URL Bar Shape
    ctx.fillStyle = urlBarColor;
    drawRoundRect(ctx, urlBarX, urlBarY, urlBarWidth, urlBarHeight, 15);
    ctx.fill();

    // 7. Render Website Address (URL Text)
    ctx.fillStyle = textColor;
    ctx.font = '14px Arial, sans-serif';
    ctx.textAlign = textAlign;
    ctx.textBaseline = 'middle';
    
    // Dynamically truncate URL text if it exceeds the URL bar width
    let dispUrl = String(url);
    while (ctx.measureText(dispUrl).width > urlBarWidth - 40 && dispUrl.length > 5) {
        dispUrl = dispUrl.substring(0, dispUrl.length - 1);
    }
    if (dispUrl.length < url.length) {
        dispUrl = dispUrl.substring(0, dispUrl.length - 3) + '...';
    }

    ctx.fillText(dispUrl, textX, textY);
    ctx.restore();

    return canvas;
}