Image Executable Identifier

/**
 * "Identifies" an image by rendering it inside a classic executable application window icon.
 * This is a creative interpretation of "Image Executable Identifier," as analyzing an image's
 * raw file data for embedded executables is not possible from a JavaScript Image object alone.
 * Instead, this function visually styles the image to look like it's part of an application.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} [size=256] The width and height of the output icon canvas in pixels.
 * @param {string} [titleBarColor='#00539C'] The color of the icon's window title bar.
 * @param {string} [bgColor='#FFFFFF'] The color of the icon's window content background.
 * @param {string} [borderColor='#808080'] The color for the icon's window border.
 * @returns {HTMLCanvasElement} A canvas element displaying the image within an executable icon frame.
 */
function processImage(originalImg, size = 256, titleBarColor = '#00539C', bgColor = '#FFFFFF', borderColor = '#808080') {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Define icon dimensions based on canvas size for scalability
    const padding = size * 0.05;
    const borderWidth = Math.max(1, size * 0.01);
    const cornerRadius = size * 0.03;
    const titleBarHeight = size * 0.12;

    const windowX = padding;
    const windowY = padding;
    const windowWidth = size - 2 * padding;
    const windowHeight = size - 2 * padding;

    // --- Draw the Window Frame ---

    // 1. Create the rounded rectangle path for the main window shape.
    ctx.beginPath();
    ctx.moveTo(windowX + cornerRadius, windowY);
    ctx.lineTo(windowX + windowWidth - cornerRadius, windowY);
    ctx.quadraticCurveTo(windowX + windowWidth, windowY, windowX + windowWidth, windowY + cornerRadius);
    ctx.lineTo(windowX + windowWidth, windowY + windowHeight - cornerRadius);
    ctx.quadraticCurveTo(windowX + windowWidth, windowY + windowHeight, windowX + windowWidth - cornerRadius, windowY + windowHeight);
    ctx.lineTo(windowX + cornerRadius, windowY + windowHeight);
    ctx.quadraticCurveTo(windowX, windowY + windowHeight, windowX, windowY + windowHeight - cornerRadius);
    ctx.lineTo(windowX, windowY + cornerRadius);
    ctx.quadraticCurveTo(windowX, windowY, windowX + cornerRadius, windowY);
    ctx.closePath();

    // 2. Fill the entire shape with the content background color.
    ctx.fillStyle = bgColor;
    ctx.fill();

    // 3. Use clipping to draw the title bar with perfectly matching rounded top corners.
    ctx.save();
    ctx.clip(); // Restrict drawing to the path defined above
    ctx.fillStyle = titleBarColor;
    ctx.fillRect(windowX, windowY, windowWidth, titleBarHeight);
    ctx.restore(); // Remove the clipping mask

    // 4. Stroke the border on top of the filled shapes.
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;
    ctx.stroke();

    // --- Draw the Original Image ---

    // Calculate position and size to draw the image inside the content area, maintaining aspect ratio.
    const contentPadding = size * 0.05;
    const contentX = windowX;
    const contentY = windowY + titleBarHeight;
    const contentWidth = windowWidth;
    const contentHeight = windowHeight - titleBarHeight;

    const availableWidth = contentWidth - contentPadding * 2;
    const availableHeight = contentHeight - contentPadding * 2;

    const imgRatio = originalImg.width / originalImg.height;
    const availableRatio = availableWidth / availableHeight;

    let drawWidth, drawHeight;
    if (imgRatio > availableRatio) {
        drawWidth = availableWidth;
        drawHeight = drawWidth / imgRatio;
    } else {
        drawHeight = availableHeight;
        drawWidth = drawHeight * imgRatio;
    }

    const drawX = contentX + (contentWidth - drawWidth) / 2;
    const drawY = contentY + (contentHeight - drawHeight) / 2;

    ctx.drawImage(originalImg, drawX, drawY, drawWidth, drawHeight);

    // --- Draw UI Elements on the Title Bar for Detail ---

    const buttonSize = titleBarHeight * 0.6;
    const buttonY = windowY + (titleBarHeight - buttonSize) / 2;
    const buttonSpacing = buttonSize * 0.4;
    const iconLineWidth = Math.max(1, size * 0.005);

    // Close button
    const closeX = windowX + windowWidth - buttonSize - buttonSpacing;
    ctx.fillStyle = '#E81123'; // Windows close red
    ctx.fillRect(closeX, buttonY, buttonSize, buttonSize);
    ctx.strokeStyle = 'white';
    ctx.lineWidth = iconLineWidth;
    ctx.beginPath();
    const crossOffset = buttonSize * 0.3;
    ctx.moveTo(closeX + crossOffset, buttonY + crossOffset);
    ctx.lineTo(closeX + buttonSize - crossOffset, buttonY + buttonSize - crossOffset);
    ctx.moveTo(closeX + buttonSize - crossOffset, buttonY + crossOffset);
    ctx.lineTo(closeX + crossOffset, buttonY + buttonSize - crossOffset);
    ctx.stroke();

    // Maximize button
    const maximizeX = closeX - buttonSize - buttonSpacing;
    ctx.strokeStyle = 'white';
    ctx.lineWidth = iconLineWidth;
    const squareOffset = buttonSize * 0.3;
    ctx.strokeRect(maximizeX + squareOffset, buttonY + squareOffset, buttonSize - 2 * squareOffset, buttonSize - 2 * squareOffset);

    // Minimize button
    const minimizeX = maximizeX - buttonSize - buttonSpacing;
    ctx.strokeStyle = 'white';
    ctx.lineWidth = iconLineWidth;
    ctx.beginPath();
    ctx.moveTo(minimizeX + squareOffset, buttonY + buttonSize / 2);
    ctx.lineTo(minimizeX + buttonSize - squareOffset, buttonY + buttonSize / 2);
    ctx.stroke();

    // Return the final canvas
    return canvas;
}