Software Website Interface Image Converter

function processImage(originalImg, theme = "light", padding = "40", background = "transparent", borderRadius = "10") {
    const paddingNum = Math.max(0, Number(padding) || 0);
    const radiusNum = Math.max(0, Number(borderRadius) || 0);
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    let imgW = originalImg.width;
    let imgH = originalImg.height;

    // Enforce a minimum width so the title bar items (dots + address bar) easily fit
    const minWidth = 250;
    if (imgW < minWidth) {
        const scale = minWidth / imgW;
        imgW = minWidth;
        imgH = imgH * scale;
    }

    const titleBarH = 40;
    const winW = imgW;
    const winH = imgH + titleBarH;

    canvas.width = winW + paddingNum * 2;
    canvas.height = winH + paddingNum * 2;

    // Helper to draw a rounded rectangle path
    function roundRectPath(x, y, w, h, r) {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.arcTo(x + w, y, x + w, y + h, r);
        ctx.arcTo(x + w, y + h, x, y + h, r);
        ctx.arcTo(x, y + h, x, y, r);
        ctx.arcTo(x, y, x + w, y, r);
        ctx.closePath();
    }

    // 1. Draw Background
    if (background && background !== "transparent") {
        ctx.fillStyle = background;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    const winX = paddingNum;
    const winY = paddingNum;

    // 2. Setup Drop Shadow and Draw App Window Base
    ctx.save();
    if (paddingNum > 0) {
        ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
        ctx.shadowBlur = Math.max(paddingNum * 0.5, 5);
        ctx.shadowOffsetY = Math.max(paddingNum * 0.2, 2);
        ctx.shadowOffsetX = 0;
    }

    // Window Base
    roundRectPath(winX, winY, winW, winH, radiusNum);
    // Fill bright to cover anti-alias artifacts before clipping
    ctx.fillStyle = theme === "dark" ? "#1e1e1e" : "#ffffff";
    ctx.fill();

    // Clip all future drawing to the rounded rectangle
    ctx.clip();
    
    // Turn off shadow for interior elements
    ctx.shadowColor = 'transparent';

    // 3. Draw Title Bar Background
    ctx.fillStyle = theme === "dark" ? "#323233" : "#f1f1f1";
    ctx.fillRect(winX, winY, winW, titleBarH);

    // 4. Draw macOS style Control Dots
    const dotRadius = 6;
    const dotSpacing = 8;
    const dotY = winY + titleBarH / 2;
    let dotX = winX + 16;

    const dotColors = ["#ff5f56", "#ffbd2e", "#27c93f"];
    dotColors.forEach(color => {
        ctx.beginPath();
        ctx.arc(dotX, dotY, dotRadius, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
        dotX += dotRadius * 2 + dotSpacing;
    });

    // 5. Draw simple Address Bar Mockup
    const addrW = Math.max(100, winW * 0.4);
    const addrH = 22;
    const addrX = winX + (winW - addrW) / 2;
    const addrY = winY + (titleBarH - addrH) / 2;

    roundRectPath(addrX, addrY, addrW, addrH, 6);
    ctx.fillStyle = theme === "dark" ? "#1e1e1e" : "#ffffff";
    ctx.fill();

    // 6. Optional Border / Underline for the Title Bar
    if (theme === "light") {
        ctx.beginPath();
        ctx.moveTo(winX, winY + titleBarH);
        ctx.lineTo(winX + winW, winY + titleBarH);
        ctx.strokeStyle = "#e1e1e1";
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    // 7. Draw the original image underneath the title bar
    ctx.drawImage(originalImg, winX, winY + titleBarH, imgW, imgH);

    ctx.restore();

    return canvas;
}