Image Text Detector

async function processImage(originalImg, lang = 'eng', boxColor = '#ff0000', boxLineWidth = 2) {
    /**
     * Dynamically loads the Tesseract.js library.
     * Uses a global promise to ensure the script is only loaded once.
     * @param {string} url - The URL of the script to load.
     * @returns {Promise<void>} - A promise that resolves when the script is loaded.
     */
    const loadTesseract = (url) => {
        if (!window.tesseractJsPromise) {
            window.tesseractJsPromise = new Promise((resolve, reject) => {
                // If Tesseract is already available, resolve immediately.
                if (window.Tesseract) {
                    return resolve();
                }
                const script = document.createElement('script');
                script.src = url;
                script.onload = () => resolve();
                script.onerror = () => {
                    // Reset promise on error to allow retrying.
                    window.tesseractJsPromise = null;
                    reject(new Error(`Failed to load Tesseract.js from ${url}`));
                };
                document.head.appendChild(script);
            });
        }
        return window.tesseractJsPromise;
    };

    const TESSERACT_CDN_URL = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // Create the canvas and context for the output.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    /**
     * Displays a message overlay on the canvas.
     * @param {string} message - The message to display.
     */
    const showMessage = (message) => {
        ctx.save();
        // Draw the original image first to not have stacked overlays.
        ctx.drawImage(originalImg, 0, 0);
        
        ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const fontSize = Math.max(20, Math.min(canvas.width / 20, 40));
        ctx.font = `bold ${fontSize}px 'Arial', sans-serif`;

        message.split('\n').forEach((line, index, arr) => {
            const yOffset = (index - (arr.length - 1) / 2) * (fontSize * 1.2);
            ctx.fillText(line, canvas.width / 2, canvas.height / 2 + yOffset);
        });
        ctx.restore();
    };

    try {
        showMessage('Loading OCR Engine...');
        await loadTesseract(TESSERACT_CDN_URL);

        const worker = await Tesseract.createWorker(lang, 1, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    const progress = (m.progress * 100).toFixed(0);
                    showMessage(`Detecting Text...\n${progress}%`);
                } else {
                    // Capitalize the status message for better display.
                    const status = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                    showMessage(`${status}...`);
                }
            }
        });
        
        const { data: { words } } = await worker.recognize(originalImg);
        
        await worker.terminate();

        // Redraw the original image to clear the final status message.
        ctx.drawImage(originalImg, 0, 0);

        // Draw bounding boxes for each detected word.
        ctx.strokeStyle = boxColor;
        const lineWidth = parseFloat(boxLineWidth);
        ctx.lineWidth = !isNaN(lineWidth) && lineWidth > 0 ? lineWidth : 2;

        ctx.beginPath();
        words.forEach(word => {
            const { x0, y0, x1, y1 } = word.bbox;
            ctx.rect(x0, y0, x1 - x0, y1 - y0);
        });
        ctx.stroke();

    } catch (error) {
        console.error('Text detection process failed:', error);
        showMessage(`Error: OCR Failed\nCheck console for details.`);
    }

    return canvas;
}