Media Photo And Video Scene Creator

/**
 * Creates a scene that looks like a media editing program window, framing the provided image.
 * This function generates a mock-up of a desktop application UI with the image as its content.
 *
 * @param {Image} originalImg The original Image object to be placed in the scene.
 * @param {string} programName The name of the mock program displayed in the title bar.
 * @param {string} fileName The name of the file displayed in the title bar.
 * @param {string} theme The color theme of the UI. Can be 'dark' or 'light'.
 * @param {number} uiScale A multiplier to scale the size of the UI elements (e.g., title bar, padding).
 * @returns {HTMLCanvasElement} A canvas element containing the generated scene.
 */
function processImage(originalImg, programName = 'Photo Editor', fileName = 'image.jpg', theme = 'dark', uiScale = 1) {
    // Define color palettes for light and dark themes
    const themes = {
        dark: {
            bg: '#252526',
            windowBar: '#3c3c3c',
            text: '#cccccc',
            imageBg: '#202020',
            close: '#ff5f57',
            minimize: '#ffbd2e',
            maximize: '#28c940',
            barBorder: 'rgba(0,0,0,0.2)'
        },
        light: {
            bg: '#f0f0f0',
            windowBar: '#e0e0e0',
            text: '#333333',
            imageBg: '#ffffff',
            close: '#ff5f57',
            minimize: '#ffbd2e',
            maximize: '#28c940',
            barBorder: 'rgba(0,0,0,0.1)'
        }
    };
    const colors = themes[theme] || themes.dark;

    // Define dimensions for UI elements, scaled by uiScale
    const topBarHeight = Math.max(30 * uiScale, 20);
    const windowPadding = Math.max(15 * uiScale, 5);
    const controlRadius = Math.max(6 * uiScale, 4);
    const controlSpacing = Math.max(8 * uiScale, 4);
    const fontSize = Math.max(13 * uiScale, 10);
    
    // Calculate the total canvas dimensions
    const canvasWidth = originalImg.width + windowPadding * 2;
    const canvasHeight = originalImg.height + windowPadding * 2 + topBarHeight;

    // Create a new canvas element
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // Draw the main window background (will only be visible if padding > 0)
    ctx.fillStyle = colors.bg;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // --- Draw Window Bar ---
    ctx.fillStyle = colors.windowBar;
    ctx.fillRect(0, 0, canvasWidth, topBarHeight);
    
    // Draw a subtle bottom border for the bar
    ctx.fillStyle = colors.barBorder;
    ctx.fillRect(0, topBarHeight - 1, canvasWidth, 1);

    // --- Draw Window Controls (Mac-style) ---
    const controlY = topBarHeight / 2;
    const firstControlX = windowPadding + controlRadius;

    // Close button
    ctx.fillStyle = colors.close;
    ctx.beginPath();
    ctx.arc(firstControlX, controlY, controlRadius, 0, Math.PI * 2, true);
    ctx.fill();

    // Minimize button
    ctx.fillStyle = colors.minimize;
    ctx.beginPath();
    ctx.arc(firstControlX + controlRadius * 2 + controlSpacing, controlY, controlRadius, 0, Math.PI * 2, true);
    ctx.fill();
    
    // Maximize button
    ctx.fillStyle = colors.maximize;
    ctx.beginPath();
    ctx.arc(firstControlX + (controlRadius * 2 + controlSpacing) * 2, controlY, controlRadius, 0, Math.PI * 2, true);
    ctx.fill();

    // --- Draw Window Title ---
    ctx.fillStyle = colors.text;
    ctx.font = `bold ${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`${programName} — ${fileName}`, canvasWidth / 2, topBarHeight / 2);

    // --- Draw Content Area ---
    // Draw background for the image content
    ctx.fillStyle = colors.imageBg;
    ctx.fillRect(0, topBarHeight, canvasWidth, canvasHeight - topBarHeight);

    // Draw the actual image onto the canvas
    ctx.drawImage(
        originalImg,
        windowPadding,
        topBarHeight + windowPadding,
        originalImg.width,
        originalImg.height
    );
    
    return canvas;
}