Image Character And ID Scanner Tool

function processImage(originalImg, language = 'eng+rus') {
    // Create main container
    const wrapper = document.createElement('div');
    wrapper.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    wrapper.style.background = '#1e1e1e';
    wrapper.style.color = '#fff';
    wrapper.style.padding = '20px';
    wrapper.style.borderRadius = '8px';
    wrapper.style.width = '100%';
    wrapper.style.maxWidth = '900px';
    wrapper.style.boxSizing = 'border-box';
    wrapper.style.margin = '0 auto';

    // Title
    const title = document.createElement('h2');
    title.textContent = 'Character & ID Scanner';
    title.style.margin = '0 0 15px 0';
    title.style.color = '#00ffcc';
    title.style.textAlign = 'center';
    wrapper.appendChild(title);

    // Canvas & image container structure
    const canvasContainer = document.createElement('div');
    canvasContainer.style.width = '100%';
    canvasContainer.style.display = 'flex';
    canvasContainer.style.justifyContent = 'center';
    canvasContainer.style.alignItems = 'center';

    const innerWrap = document.createElement('div');
    innerWrap.style.position = 'relative';
    innerWrap.style.display = 'inline-block';
    innerWrap.style.maxWidth = '100%';
    innerWrap.style.boxShadow = '0 4px 15px rgba(0,0,0,0.5)';
    innerWrap.style.borderRadius = '4px';
    innerWrap.style.overflow = 'hidden';

    // Set up canvas constraint to prevent out-of-memory on gigantic images
    const canvas = document.createElement('canvas');
    canvas.style.display = 'block';
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';

    const MAX_DIMENSION = 1600;
    let scale = 1;
    if (originalImg.width > MAX_DIMENSION || originalImg.height > MAX_DIMENSION) {
        scale = Math.min(MAX_DIMENSION / originalImg.width, MAX_DIMENSION / originalImg.height);
    }
    const drawWidth = Math.round(originalImg.width * scale);
    const drawHeight = Math.round(originalImg.height * scale);

    canvas.width = drawWidth;
    canvas.height = drawHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, drawWidth, drawHeight);
    
    innerWrap.appendChild(canvas);

    // Create moving scanner laser
    const laser = document.createElement('div');
    laser.style.position = 'absolute';
    laser.style.left = '0';
    laser.style.width = '100%';
    laser.style.height = '4px';
    laser.style.backgroundColor = 'rgba(0, 255, 204, 0.8)';
    laser.style.boxShadow = '0 0 15px 3px rgba(0, 255, 204, 0.9)';
    laser.style.zIndex = '10';

    const styleId = 'scanner-laser-style';
    if (!document.getElementById(styleId)) {
        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = `
            @keyframes img-scanline {
                0% { top: 0%; }
                100% { top: 98%; }
            }
            .img-scanning-laser {
                animation: img-scanline 2s infinite alternate linear;
            }
        `;
        document.head.appendChild(style);
    }
    laser.classList.add('img-scanning-laser');
    innerWrap.appendChild(laser);
    canvasContainer.appendChild(innerWrap);
    wrapper.appendChild(canvasContainer);

    // Create results & status interface
    const infoBox = document.createElement('div');
    infoBox.style.marginTop = '20px';
    infoBox.style.padding = '15px';
    infoBox.style.background = '#2c2c2c';
    infoBox.style.borderRadius = '5px';
    infoBox.style.borderLeft = '5px solid #00ffcc';

    const statusText = document.createElement('div');
    statusText.textContent = 'Status: Initializing Scanner Engine...';
    statusText.style.fontWeight = 'bold';
    statusText.style.marginBottom = '15px';
    statusText.style.color = '#ffcc00';
    infoBox.appendChild(statusText);

    const resultLabel = document.createElement('label');
    resultLabel.textContent = 'Extracted ID Features & Characters:';
    resultLabel.style.display = 'block';
    resultLabel.style.marginBottom = '5px';
    resultLabel.style.fontSize = '14px';
    resultLabel.style.color = '#ccc';
    infoBox.appendChild(resultLabel);

    const resultData = document.createElement('textarea');
    resultData.style.width = '100%';
    resultData.style.height = '180px';
    resultData.style.background = '#111';
    resultData.style.color = '#00ffcc';
    resultData.style.border = '1px solid #444';
    resultData.style.borderRadius = '4px';
    resultData.style.padding = '10px';
    resultData.style.boxSizing = 'border-box';
    resultData.style.fontFamily = 'monospace';
    resultData.style.fontSize = '14px';
    resultData.style.resize = 'vertical';
    resultData.readOnly = true;
    resultData.placeholder = 'Extracted text will appear here once scanning is complete...';
    infoBox.appendChild(resultData);

    wrapper.appendChild(infoBox);

    // Scanner Processing Logic
    (async () => {
        try {
            // Include Optical Character Recognition (OCR) Engine dynamically
            if (!window.Tesseract) {
                statusText.textContent = 'Status: Downloading Character Recognition Engine...';
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = () => reject(new Error('Failed to load OCR Engine. Please check your internet connection.'));
                    document.head.appendChild(script);
                });
            }

            statusText.textContent = 'Status: Identifying Characters...';

            const { data } = await window.Tesseract.recognize(
                canvas,
                language,
                {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            statusText.textContent = `Status: Scanning Characters... ${(m.progress * 100).toFixed(1)}%`;
                        } else {
                            const statusMsg = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                            statusText.textContent = `Status: ${statusMsg}...`;
                        }
                    }
                }
            );

            // Hide scanner effect
            laser.classList.remove('img-scanning-laser');
            laser.style.display = 'none';

            // Highlight found characters
            ctx.strokeStyle = '#00ffcc';
            ctx.lineWidth = Math.max(2, Math.floor(drawWidth / 300));
            ctx.fillStyle = 'rgba(0, 255, 204, 0.15)';

            let boxCount = 0;
            if (data.words && data.words.length > 0) {
                for (const word of data.words) {
                    if (word.text.trim().length > 0) {
                        ctx.fillRect(word.bbox.x0, word.bbox.y0, word.bbox.x1 - word.bbox.x0, word.bbox.y1 - word.bbox.y0);
                        ctx.strokeRect(word.bbox.x0, word.bbox.y0, word.bbox.x1 - word.bbox.x0, word.bbox.y1 - word.bbox.y0);
                        boxCount++;
                    }
                }
            }

            // Results generation and regex analysis for generic ID structures
            const extractedText = data.text.trim();
            let outputStr = "=== CHARACTER SCAN RESULTS ===\n";

            if (!extractedText) {
                outputStr += "No readable characters found in the image.\n";
            } else {
                const cleanText = extractedText.replace(/\n{3,}/g, '\n\n');
                outputStr += `Detected ${boxCount} word components.\n\n`;
                outputStr += cleanText + "\n\n";

                outputStr += "=== IDENTIFIER (ID) ANALYSIS ===\n";
                // Match uppercase letters with numbers, 6-16 length typical for IDs/Passports
                const rawFeatures = cleanText.match(/\b([A-Z0-9]{6,16})\b/gi);
                const idNumbers = new Set(rawFeatures?.filter(x => /\d/.test(x) && x.length > 5));
                let foundIdFeatures = false;

                if (idNumbers.size > 0) {
                    outputStr += `[+] Potential Document/ID Numbers:\n    - ${Array.from(idNumbers).join('\n    - ')}\n`;
                    foundIdFeatures = true;
                }

                // Match typical Date formats DD/MM/YYYY or YYYY-MM-DD
                const dateMatches = cleanText.match(/\b(\d{2}[\.\-\/]\d{2}[\.\-\/]\d{4}|\d{4}[\.\-\/]\d{2}[\.\-\/]\d{2})\b/g);
                if (dateMatches) {
                    outputStr += `[+] Potential Dates (DOB/Expiry):\n    - ${Array.from(new Set(dateMatches)).join('\n    - ')}\n`;
                    foundIdFeatures = true;
                }

                if (!foundIdFeatures) {
                    outputStr += "[-] No standard ID patterns (Alphanumeric hashes, standardized dates) detected.\n";
                }
            }

            resultData.value = outputStr;
            statusText.textContent = 'Status: Scan Complete!';
            statusText.style.color = '#00ffcc';

        } catch (error) {
            statusText.textContent = `Status: Error - ${error.message}`;
            statusText.style.color = '#ff4444';
            laser.style.display = 'none';
        }
    })();

    return wrapper;
}