Website Interface Identifier Address Tool Icon Creator

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

    // Calculate dynamic scaling for high-resolution images
    const scale = Math.max(1, originalImg.width / 800);
    const hHeight = 40 * scale;
    const btnRadius = 6 * scale;
    const btnSpacing = 20 * scale;
    const addrHeight = 24 * scale;
    let addrWidth = originalImg.width * 0.6;
    
    // Fallbacks for narrow images
    if (addrWidth < 150 * scale) {
        addrWidth = Math.min(originalImg.width - 100 * scale, 150 * scale);
    }
    if (addrWidth < 0) {
        addrWidth = 0;
    }

    const fontSize = 12 * scale;
    const cornerRadius = 10 * scale;
    const pad = Number(padding) * scale;
    
    canvas.width = originalImg.width + pad * 2;
    canvas.height = originalImg.height + hHeight + pad * 2;

    const isDark = theme.toLowerCase() === 'dark';
    
    // Helper functionality for older browser compatibility
    function drawRoundRect(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
    }

    // 1. Draw Drop Shadow
    if (Number(showShadow) === 1) {
        ctx.shadowColor = isDark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0.2)';
        ctx.shadowBlur = 20 * scale;
        ctx.shadowOffsetY = 10 * scale;
    }

    // 2. Draw Browser Base Container
    drawRoundRect(ctx, pad, pad, originalImg.width, originalImg.height + hHeight, cornerRadius);
    ctx.fillStyle = isDark ? '#1a1a1a' : '#ffffff';
    ctx.fill();
    
    // Disable shadow for inner elements
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;
    
    // 3. Clip Content Inside the Rounded Browser Window
    ctx.save();
    drawRoundRect(ctx, pad, pad, originalImg.width, originalImg.height + hHeight, cornerRadius);
    ctx.clip();
    
    // 4. Draw Header/Tab Bar area
    ctx.fillStyle = isDark ? '#2d2d2d' : '#f0f0f0';
    ctx.fillRect(pad, pad, originalImg.width, hHeight);
    
    // 5. Draw OS control buttons (Mac style)
    if (originalImg.width > 80 * scale) {
        const colors = ['#ff5f56', '#ffbd2e', '#27c93f'];
        colors.forEach((color, i) => {
            ctx.beginPath();
            ctx.arc(pad + 15 * scale + i * btnSpacing, pad + hHeight / 2, btnRadius, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.fill();
        });
    }
    
    // 6. Draw URL Address Bar
    if (addrWidth > 0) {
        const addrX = pad + (originalImg.width - addrWidth) / 2;
        const addrY = pad + (hHeight - addrHeight) / 2;
        drawRoundRect(ctx, addrX, addrY, addrWidth, addrHeight, Math.min(addrHeight / 2, cornerRadius));
        ctx.fillStyle = isDark ? '#1f1f1f' : '#ffffff';
        ctx.fill();
        
        if (url) {
            ctx.fillStyle = isDark ? '#aaaaaa' : '#666666';
            ctx.font = `${fontSize}px sans-serif`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // Calculate placement
            const textWidth = ctx.measureText(url).width;
            const maxTextWidth = addrWidth - 30 * scale;
            const renderTextWidth = Math.min(textWidth, maxTextWidth);
            
            const textX = pad + originalImg.width / 2;
            const lockX = textX - renderTextWidth / 2 - 10 * scale;
            const lockY = pad + hHeight / 2;
            
            // Draw Subtly Styled Padlock Icon
            ctx.save();
            ctx.translate(lockX, lockY);
            ctx.fillStyle = isDark ? '#aaaaaa' : '#666666';
            ctx.strokeStyle = isDark ? '#aaaaaa' : '#666666';
            ctx.lineWidth = 1.2 * scale;
            
            // Lock body
            ctx.fillRect(-3 * scale, -1 * scale, 6 * scale, 5 * scale);
            
            // Lock shackle
            ctx.beginPath();
            ctx.arc(0, -1 * scale, 2 * scale, Math.PI, 0);
            ctx.stroke();
            ctx.restore();
            
            // Draw URL Text
            ctx.save();
            drawRoundRect(ctx, addrX + 5 * scale, addrY, addrWidth - 10 * scale, addrHeight, addrHeight / 2);
            ctx.clip(); // Prevent text spilling out of padded bounds
            ctx.fillText(url, textX, pad + hHeight / 2 + 1 * scale);
            ctx.restore();
        }
    }
    
    // 7. Draw the user's Original Image
    ctx.drawImage(originalImg, pad, pad + hHeight, originalImg.width, originalImg.height);
    
    ctx.restore(); // Undo inner clipping region
    
    // 8. Add a subtle border stroke around the interface for Light Theme lacking dense shadow
    if (!isDark && Number(showShadow) !== 1) {
        drawRoundRect(ctx, pad, pad, originalImg.width, originalImg.height + hHeight, cornerRadius);
        ctx.lineWidth = 1 * scale;
        ctx.strokeStyle = '#e0e0e0';
        ctx.stroke();
    }
    
    return canvas;
}