Image Movie Identifier Scanner Tool

function processImage(originalImg, overlayColor = "#00ffcc", statusText = "IDENTIFYING MOVIE...", scanPosition = 45) {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

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

    // 2. Film strip overlay on left and right to emphasize "Movie" context
    const stripWidth = Math.max(30, width * 0.08); // 8% of width for film strip edges
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, stripWidth, height);
    ctx.fillRect(width - stripWidth, 0, stripWidth, height);

    // Draw Sprocket holes for the film strip
    ctx.fillStyle = "#ffffff";
    const holeWidth = stripWidth * 0.5;
    const holeHeight = Math.max(10, holeWidth * 0.75);
    const holeXLeft = (stripWidth - holeWidth) / 2;
    const holeXRight = width - stripWidth + holeXLeft;
    const spacing = holeHeight * 2;

    for (let y = spacing / 2; y < height; y += spacing) {
        ctx.fillRect(holeXLeft, y, holeWidth, holeHeight);
        ctx.fillRect(holeXRight, y, holeWidth, holeHeight);
    }

    // 3. Apply a dark sci-fi vignette/tint over the central image area for better HUD contrast
    const centralWidth = width - (stripWidth * 2);
    ctx.fillStyle = "rgba(0, 10, 20, 0.4)";
    ctx.fillRect(stripWidth, 0, centralWidth, height);

    // 4. Draw the HUD Scanner Grid
    ctx.strokeStyle = overlayColor;
    ctx.lineWidth = 1;
    ctx.globalAlpha = 0.25;
    ctx.beginPath();
    const gridSize = Math.max(20, width * 0.05);
    for (let x = stripWidth; x <= width - stripWidth; x += gridSize) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
    }
    for (let y = 0; y <= height; y += gridSize) {
        ctx.moveTo(stripWidth, y);
        ctx.lineTo(width - stripWidth, y);
    }
    ctx.stroke();

    // 5. Draw Target Reticle / Brackets (The "Identifier" aspect)
    ctx.globalAlpha = 0.8;
    ctx.lineWidth = Math.max(3, width * 0.005);
    const cx = width / 2;
    const cy = height / 2;
    const bWidth = centralWidth * 0.6;
    const bHeight = height * 0.6;
    const cornerSize = Math.max(15, bWidth * 0.1);

    const left = cx - bWidth / 2;
    const right = cx + bWidth / 2;
    const top = cy - bHeight / 2;
    const bottom = cy + bHeight / 2;

    ctx.beginPath();
    // Top-Left corner
    ctx.moveTo(left, top + cornerSize);
    ctx.lineTo(left, top);
    ctx.lineTo(left + cornerSize, top);
    // Top-Right corner
    ctx.moveTo(right - cornerSize, top);
    ctx.lineTo(right, top);
    ctx.lineTo(right, top + cornerSize);
    // Bottom-Right corner
    ctx.moveTo(right, bottom - cornerSize);
    ctx.lineTo(right, bottom);
    ctx.lineTo(right - cornerSize, bottom);
    // Bottom-Left corner
    ctx.moveTo(left + cornerSize, bottom);
    ctx.lineTo(left, bottom);
    ctx.lineTo(left, bottom - cornerSize);
    ctx.stroke();

    // Minor center crosshairs
    const crosshairSize = Math.max(10, width * 0.02);
    ctx.beginPath();
    ctx.moveTo(cx, cy - crosshairSize);
    ctx.lineTo(cx, cy + crosshairSize);
    ctx.moveTo(cx - crosshairSize, cy);
    ctx.lineTo(cx + crosshairSize, cy);
    ctx.stroke();

    // 6. Draw the glowing laser scanline
    // Ensure scanPosition is between 0 and 100
    const clampedScanPos = Math.max(0, Math.min(100, Number(scanPosition))); 
    const scanY = (height * clampedScanPos) / 100;
    
    ctx.globalAlpha = 1.0;
    ctx.lineWidth = Math.max(3, height * 0.008);
    ctx.shadowColor = overlayColor;
    ctx.shadowBlur = 15;
    ctx.beginPath();
    ctx.moveTo(stripWidth, scanY);
    ctx.lineTo(width - stripWidth, scanY);
    ctx.stroke();
    // Reset shadow blur
    ctx.shadowBlur = 0; 

    // 7. Add HUD Output Details & Texts
    const fontSize = Math.max(14, height * 0.03);
    ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
    ctx.fillStyle = overlayColor;
    ctx.textBaseline = "top";
    
    // Top Left text
    ctx.fillText(statusText, stripWidth + 15, 15);
    
    // Bottom Left text
    ctx.textBaseline = "bottom";
    ctx.fillText(`SCAN POS: ${clampedScanPos.toFixed(1)}%`, stripWidth + 15, height - 15);
    
    // Top Right text
    ctx.textBaseline = "top";
    const trackingText = "SYS.TRACKING_ACTIVE";
    ctx.fillText(trackingText, width - stripWidth - 15 - ctx.measureText(trackingText).width, 15);

    // Bottom Right text (Simulated Movie ID Hash to emphasize 'Identifier' tool)
    ctx.textBaseline = "bottom";
    const randomHash = "MOV_ID: " + Math.random().toString(16).substr(2, 10).toUpperCase();
    ctx.fillText(randomHash, width - stripWidth - 15 - ctx.measureText(randomHash).width, height - 15);

    return canvas;
}