Scanner Screenshot Movie And Music Identifier Creator

function processImage(originalImg, mediaType = "Music", title = "Unknown Title", subtitle = "Unknown Artist/Director", scannerPosition = 50, themeColor = "#00ffcc") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Draw the original image as the background
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Dynamic scaling factor based on image size to ensure UI remains proportional
    const scale = Math.max(0.5, Math.min(width, height) / 1000);

    // 1. Apply a subtle CRT scanline overlay pattern
    const patternCanvas = document.createElement('canvas');
    patternCanvas.width = 4;
    patternCanvas.height = 4;
    const pCtx = patternCanvas.getContext('2d');
    pCtx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    pCtx.fillRect(0, 0, 4, 2);
    const pattern = ctx.createPattern(patternCanvas, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, width, height);

    // 2. Add a dark gradient at the bottom for text readability
    const gradientHeight = 250 * scale;
    const gradient = ctx.createLinearGradient(0, height - gradientHeight, 0, height);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(0.5, 'rgba(0, 0, 0, 0.6)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.9)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, height - gradientHeight, width, gradientHeight);

    // 3. Draw Scanner Framing HUD (Corners)
    ctx.strokeStyle = themeColor;
    ctx.lineWidth = 4 * scale;
    const cornerSize = 50 * scale;
    const margin = 30 * scale;

    const drawCorner = (x, y, startX, startY, endX, endY) => {
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(x, y);
        ctx.lineTo(endX, endY);
        ctx.stroke();
    };

    // Top Left
    drawCorner(margin, margin, margin, margin + cornerSize, margin + cornerSize, margin);
    // Top Right
    drawCorner(width - margin, margin, width - margin, margin + cornerSize, width - margin - cornerSize, margin);
    // Bottom Left
    drawCorner(margin, height - margin, margin, height - margin - cornerSize, margin + cornerSize, height - margin);
    // Bottom Right
    drawCorner(width - margin, height - margin, width - margin, height - margin - cornerSize, width - margin - cornerSize, height - margin);

    // 4. Draw the Glowing Scanner Line representing the "Scanner Identifier" action
    // clamp scannerPosition between 0 and 100
    const clampedPos = Math.max(0, Math.min(100, scannerPosition));
    const scanY = margin + ((clampedPos / 100) * (height - margin * 2));
    
    ctx.shadowBlur = 15 * scale;
    ctx.shadowColor = themeColor;
    ctx.fillStyle = themeColor;
    ctx.globalAlpha = 0.8;
    ctx.fillRect(margin, scanY - (2 * scale), width - (margin * 2), 4 * scale);
    ctx.globalAlpha = 1.0;
    ctx.shadowBlur = 0; // Reset shadow

    // 5. Draw Top HUD Data Text (Mock ID and Type)
    ctx.fillStyle = themeColor;
    ctx.font = `bold ${16 * scale}px "Courier New", Courier, monospace`;
    ctx.textBaseline = 'top';
    const mockId = Array.from(title).reduce((acc, char) => acc + char.charCodeAt(0), 0) % 999999;
    ctx.fillText(`[ SYS.ID: ${mockId.toString().padStart(6, '0')} ]`, margin + 20 * scale, margin + 20 * scale);
    ctx.fillText(`[ MEDIA.TYPE: ${mediaType.toUpperCase()} ]`, margin + 20 * scale, margin + 45 * scale);

    // 6. Draw Bottom Identifiers ("Two Scanner Identifier" - Barcode & Audio Waveform)
    let startX = margin + 20 * scale;
    const startY = height - margin - 80 * scale;
    ctx.fillStyle = '#ffffff';

    // Scanner 1: The Media Identifier Barcode
    const barcodePattern = [3, 1, 1, 2, 5, 1, 1, 3, 2, 2, 1, 4, 1, 1, 3, 2, 1, 2, 1, 4, 3];
    ctx.fillStyle = themeColor;
    ctx.fillRect(startX, startY + 45 * scale, 110 * scale, 2 * scale); // Top underline
    ctx.fillStyle = '#ffffff';
    let currentX = startX;
    barcodePattern.forEach((w) => {
        const barWidth = w * scale * 1.5;
        ctx.fillRect(currentX, startY, barWidth, 40 * scale);
        currentX += barWidth + (1.5 * scale);
    });

    startX += 130 * scale;

    // Display Title and Subtitle Info
    ctx.textBaseline = 'middle';
    ctx.fillStyle = '#ffffff';
    ctx.font = `bold ${32 * scale}px Arial, sans-serif`;
    ctx.fillText(title.toUpperCase(), startX, startY + 10 * scale);
    
    ctx.fillStyle = '#aaaaaa';
    ctx.font = `${20 * scale}px Arial, sans-serif`;
    ctx.fillText(subtitle.toUpperCase(), startX, startY + 40 * scale);

    // Scanner 2: The Audio/Signal Waveform (Right Side)
    const wavePattern = [10, 25, 15, 30, 20, 25, 12, 38, 22, 18, 35, 15, 28, 40, 10, 20, 5, 28, 14, 32];
    const waveMaxHeight = 40 * scale;
    const rightMarginX = width - margin - 20 * scale;
    const waveCount = wavePattern.length;
    const waveSpacing = 6 * scale;
    const waveTotalWidth = waveCount * waveSpacing;
    let waveStartX = rightMarginX - waveTotalWidth;

    ctx.fillStyle = themeColor;
    wavePattern.forEach((val) => {
        const h = (val / 40) * waveMaxHeight;
        // Center the wave shapes vertically around the startY + 20 coordinate
        const yOffset = startY + 20 * scale - (h / 2);
        ctx.beginPath();
        ctx.roundRect(waveStartX, yOffset, 3 * scale, h, 2 * scale);
        ctx.fill();
        waveStartX += waveSpacing;
    });

    // Add signal strength text next to the wave
    ctx.fillStyle = '#aaaaaa';
    ctx.font = `${12 * scale}px "Courier New", monospace`;
    ctx.textBaseline = 'bottom';
    ctx.fillText("SIG.STR // 98%", rightMarginX - waveTotalWidth, startY - 5 * scale);

    return canvas;
}