Image Movie Scanner And Identifier Tool

function processImage(originalImg, themeColor = "#00FF41", language = "RU", fakeScanDurationMs = "0") {
    // Validate input image
    if (!(originalImg instanceof HTMLImageElement || originalImg instanceof HTMLCanvasElement)) {
        console.error("Invalid image input provided.");
        return null;
    }

    const width = originalImg.width;
    const height = originalImg.height;

    // Create target canvas
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");

    // Dynamic scaling so HUD elements adjust to image size smoothly
    const scale = Math.max(1, Math.max(width, height) / 1000);
    const margin = 30 * scale;

    // Draw the source image
    ctx.drawImage(originalImg, 0, 0);

    // Calculate a consistent deterministic "Movie ID" from the pixel values
    let hash = 0;
    try {
        const imgData = ctx.getImageData(0, 0, width, height).data;
        const step = Math.max(4, Math.floor(imgData.length / 400) * 4);
        for (let i = 0; i < imgData.length; i += step) {
            // Adds R + G + B
            hash += imgData[i] + imgData[i + 1] + imgData[i + 2];
        }
    } catch (e) {
        // Silent fallback in case of CORS tainted canvas
        hash = width * height + width; 
    }

    // Diverse set of predefined movies
    const movies = [
        { title: "The Matrix (Матрица)", genre: "Sci-Fi / Action", match: "99.4%" },
        { title: "Inception (Начало)", genre: "Sci-Fi / Thriller", match: "98.1%" },
        { title: "Interstellar (Интерстеллар)", genre: "Sci-Fi / Drama", match: "97.3%" },
        { title: "Pulp Fiction (Криминальное чтиво)", genre: "Crime / Drama", match: "96.5%" },
        { title: "The Dark Knight (Темный рыцарь)", genre: "Action / Crime", match: "98.8%" },
        { title: "Forrest Gump (Форрест Гамп)", genre: "Drama / Romance", match: "95.2%" },
        { title: "Fight Club (Бойцовский клуб)", genre: "Drama", match: "97.9%" },
        { title: "Avatar (Аватар)", genre: "Action / Adventure", match: "94.7%" },
        { title: "Gladiator (Гладиатор)", genre: "Action / Drama", match: "95.8%" },
        { title: "Titanic (Титаник)", genre: "Drama / Romance", match: "98.2%" },
        { title: "The Terminator (Терминатор)", genre: "Sci-Fi / Action", match: "99.1%" },
        { title: "Jurassic Park (Парк Юрского периода)", genre: "Adventure / Sci-Fi", match: "96.9%" },
        { title: "The Shawshank Redemption (Побег из Шоушенка)", genre: "Drama", match: "99.9%" },
        { title: "The Lord of the Rings (Властелин колец)", genre: "Fantasy", match: "97.8%" },
        { title: "Star Wars (Звёздные войны)", genre: "Sci-Fi / Fantasy", match: "95.5%" },
        { title: "Spider-Man (Человек-паук)", genre: "Action / Superhero", match: "94.2%" },
        { title: "The Avengers (Мстители)", genre: "Action / Sci-Fi", match: "96.1%" },
        { title: "Alien (Чужой)", genre: "Sci-Fi / Horror", match: "98.5%" },
        { title: "Blade Runner (Бегущий по лезвию)", genre: "Sci-Fi / Thriller", match: "97.0%" },
        { title: "Dune (Дюна)", genre: "Sci-Fi / Adventure", match: "95.4%" }
    ];

    const matched = movies[Math.floor(hash) % movies.length];

    // Language configuration
    const isRU = (typeof language === "string" && language.toUpperCase() === "RU");
    const lblAnalyzing = isRU ? "СКАНИРОВАНИЕ ПО ФИНГЕРПРИНТУ..." : "FINGERPRINT SEARCH...";
    const lblComplete = isRU ? "ИДЕНТИФИКАЦИЯ ЗАВЕРШЕНА" : "IDENTIFICATION COMPLETE";
    const lblMatchFound = isRU ? "НАЙДЕНО СОВПАДЕНИЕ" : "MATCH FOUND";
    const lblTitle = isRU ? "НАЗВАНИЕ:" : "TITLE:";
    const lblGenre = isRU ? "ЖАНР:" : "GENRE:";
    const lblMatchPrc = isRU ? "СОВПАДЕНИЕ:" : "MATCH:";

    const scanDuration = parseInt(fakeScanDurationMs, 10);
    const duration = isNaN(scanDuration) ? 0 : scanDuration;
    let startTime = null;

    /**
     * Engine loop drawing the HUD Scanner Frame layout
     */
    function drawFrame(time) {
        if (!startTime) startTime = time;
        const elapsed = time - startTime;
        const progress = duration > 0 ? Math.min(1, Math.max(0, elapsed / duration)) : 1;

        // Clear and redraw image substrate
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(originalImg, 0, 0);

        // Graphics configuration
        const mainFont = `bold ${Math.floor(20 * scale)}px "Courier New", Courier, monospace`;
        const subFont = `normal ${Math.floor(18 * scale)}px "Courier New", Courier, monospace`;
        ctx.lineJoin = "round";
        ctx.textBaseline = "top";

        // Viewfinder Corners
        const cornerSize = 50 * scale;
        const cornerThick = 6 * scale;
        ctx.lineWidth = cornerThick;
        ctx.strokeStyle = themeColor;
        
        const drawCorner = (x, y, dx, dy) => {
            ctx.beginPath();
            ctx.moveTo(x + dx * cornerSize, y);
            ctx.lineTo(x, y);
            ctx.lineTo(x, y + dy * cornerSize);
            ctx.stroke();
        };

        drawCorner(margin, margin, 1, 1);
        drawCorner(width - margin, margin, -1, 1);
        drawCorner(margin, height - margin, 1, -1);
        drawCorner(width - margin, height - margin, -1, -1);

        if (progress < 1) {
            // Animating Phase State
            
            // Optical Central Crosshair Element
            const cx = width / 2;
            const cy = height / 2;
            const r = 30 * scale;
            ctx.beginPath();
            ctx.arc(cx, cy, r, 0, 2 * Math.PI);
            ctx.lineWidth = 3 * scale;
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(cx - r - 15 * scale, cy);
            ctx.lineTo(cx + r + 15 * scale, cy);
            ctx.moveTo(cx, cy - r - 15 * scale);
            ctx.lineTo(cx, cy + r + 15 * scale);
            ctx.stroke();

            // Geometric Laser Scanning Bar
            const sweeps = 3;
            const sweepProgress = (progress * sweeps) % 1;
            let yFactor = sweepProgress * 2;
            if (yFactor > 1) yFactor = 2 - yFactor; 
            const yPos = margin + (height - 2 * margin) * yFactor;
            
            ctx.beginPath();
            ctx.moveTo(margin, yPos);
            ctx.lineTo(width - margin, yPos);
            ctx.lineWidth = 4 * scale;
            ctx.shadowColor = themeColor;
            ctx.shadowBlur = 15 * scale;
            ctx.stroke();
            ctx.shadowBlur = 0; 

            // HUD Message Label: Analyzing
            ctx.font = mainFont;
            const pad = 10 * scale;
            const boxW = ctx.measureText(lblAnalyzing).width + pad * 2;
            const boxH = 36 * scale;
            
            ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
            ctx.fillRect(margin + pad, margin + pad, boxW, boxH);
            
            if (Math.floor(progress * 25) % 2 === 0) {
                ctx.fillStyle = themeColor;
                ctx.fillText(lblAnalyzing, margin + pad * 2, margin + pad * 1.5);
            }

            requestAnimationFrame(drawFrame);
        } else {
            // Computed Final Phase State
            
            ctx.font = mainFont;
            const pad = 10 * scale;
            const completeBoxW = ctx.measureText(lblComplete).width + pad * 2;
            const completeBoxH = 36 * scale;
            
            ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
            ctx.fillRect(margin + pad, margin + pad, completeBoxW, completeBoxH);
            ctx.fillStyle = themeColor;
            ctx.fillText(lblComplete, margin + pad * 2, margin + pad * 1.5);

            // Information Overlay Module
            const line1 = `${lblTitle} ${matched.title}`;
            const line2 = `${lblGenre} ${matched.genre}`;
            const line3 = `${lblMatchPrc} ${matched.match}`;
            
            ctx.font = subFont;
            const w1 = ctx.measureText(line1).width;
            const w2 = ctx.measureText(line2).width;
            const w3 = ctx.measureText(line3).width;
            ctx.font = mainFont;
            const wh = ctx.measureText(`[ ${lblMatchFound} ]`).width;

            const maxTextWidth = Math.max(w1, w2, w3, wh);
            const cardW = maxTextWidth + pad * 4;
            const cardH = 140 * scale;
            const cardX = margin + pad;
            const cardY = height - margin - pad - cardH;

            // Box and Borders
            ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
            ctx.fillRect(cardX, cardY, cardW, cardH);
            ctx.strokeStyle = themeColor;
            ctx.lineWidth = 2 * scale;
            ctx.strokeRect(cardX, cardY, cardW, cardH);

            // Text Labels Content Output
            ctx.fillStyle = themeColor;
            ctx.fillText(`[ ${lblMatchFound} ]`, cardX + pad * 2, cardY + pad * 1.5);
            
            ctx.beginPath();
            ctx.moveTo(cardX + pad * 1.5, cardY + pad * 4);
            ctx.lineTo(cardX + cardW - pad * 1.5, cardY + pad * 4);
            ctx.lineWidth = 1 * scale;
            ctx.stroke();

            ctx.font = subFont;
            const lineHeight = 28 * scale;
            let textY = cardY + pad * 5.5;
            
            ctx.fillText(line1, cardX + pad * 2, textY);
            textY += lineHeight;
            ctx.fillText(line2, cardX + pad * 2, textY);
            textY += lineHeight;
            ctx.fillText(line3, cardX + pad * 2, textY);
        }
    }

    // Start painting cycle synchronously for immediate first frame buffer display
    if (window.performance && typeof performance.now === "function") {
        drawFrame(performance.now());
    } else {
        drawFrame(Date.now());
    }

    return canvas;
}