Image Search Text Finder

async function processImage(originalImg, searchText = "", highlightColor = "rgba(255, 255, 0, 0.4)", searchMode = "includes") {
    // Create a new canvas to draw the image and text highlights
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Dynamically load Tesseract.js (Optical Character Recognition library)
    if (typeof Tesseract === 'undefined') {
        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;
            document.head.appendChild(script);
        });
    }

    try {
        // Initialize the Tesseract worker
        const worker = await Tesseract.createWorker("eng");
        
        // Run OCR on the canvas (this extracts text and bounding boxes)
        const { data } = await worker.recognize(canvas);
        await worker.terminate();

        const words = data.words || [];
        const searchLower = searchText.trim().toLowerCase();
        
        // Split search phrase into individual words for continuous multi-word matching
        const searchWords = searchLower.split(/\s+/).filter(w => w.length > 0);

        ctx.fillStyle = highlightColor;

        if (searchWords.length === 0) {
            // Highlight all recognized text if no search text provided
            words.forEach(word => {
                const { x0, y0, x1, y1 } = word.bbox;
                ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
            });
        } else {
            // Search for matches in the recognized text
            for (let i = 0; i <= words.length - searchWords.length; i++) {
                let isMatch = true;
                
                // Compare sequential sequence of recognized words with sequential search terms
                for (let j = 0; j < searchWords.length; j++) {
                    const recognizedWord = words[i + j].text.toLowerCase();
                    const sWord = searchWords[j];
                    
                    if (searchMode.toLowerCase() === "exact") {
                        // Strip most punctuation from image text for fair exact matching
                        const strippedWord = recognizedWord.replace(/[.,!?;:'"()[\]{}]/g, '');
                        if (strippedWord !== sWord) {
                            isMatch = false;
                            break;
                        }
                    } else {
                        // Includes/substring matching
                        if (!recognizedWord.includes(sWord)) {
                            isMatch = false;
                            break;
                        }
                    }
                }
                
                // If the sequence matches, highlight those specific words
                if (isMatch) {
                    for (let j = 0; j < searchWords.length; j++) {
                        const { x0, y0, x1, y1 } = words[i + j].bbox;
                        ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
                    }
                }
            }
        }
    } catch (error) {
        console.error("Text extraction failed:", error);
        ctx.fillStyle = "rgba(255, 0, 0, 0.7)";
        ctx.font = "bold 20px Arial";
        ctx.fillText("Failed to process or find text.", 10, 30);
    }

    // Returns a single canvas element that visually reveals searched text
    return canvas;
}