Image Text Extractor

async function processImage(originalImg, language = 'eng') {
    /**
     * Extracts text from an image using OCR.
     * This function requires an internet connection to load the Tesseract.js library.
     *
     * @param {Image} originalImg - The source Image object.
     * @param {string} language - The language code for OCR (e.g., 'eng', 'fra', 'deu', 'hin').
     *                            Multiple languages can be specified by joining with '+', e.g., 'eng+fra'.
     *                            A list of codes can be found on the Tesseract.js documentation.
     *                            The description's example "Rohit Nam hi kafi hai" is Hindi, which uses the 'hin' code.
     * @returns {Promise<HTMLElement>} A Promise that resolves to a <pre> element containing the extracted text.
     */

    // Dynamically load the Tesseract.js library from a CDN if it's not already on the page.
    if (typeof Tesseract === 'undefined') {
        try {
            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 Tesseract.js script.'));
                document.head.appendChild(script);
            });
        } catch (error) {
            console.error(error);
            const errorElement = document.createElement('div');
            errorElement.textContent = 'Error: Could not load the OCR library. Please check your internet connection and try again.';
            errorElement.style.color = 'red';
            errorElement.style.padding = '10px';
            return errorElement;
        }
    }

    let worker;
    let extractedText = 'Could not extract text. The process may have failed.';

    try {
        // Create a Tesseract worker. The caller can show a "Loading..." message
        // while this async function is awaited.
        worker = await Tesseract.createWorker(language);

        // Perform OCR on the image.
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);
        extractedText = text || 'No text was found in the image.';

    } catch (error) {
        console.error('OCR process failed:', error);
        extractedText = `Error during text extraction. Please check the browser console for details. (Language: ${language})`;
    } finally {
        // Terminate the worker to free up system resources.
        if (worker) {
            await worker.terminate();
        }
    }

    // Create a <pre> element to nicely display the extracted text, preserving formatting.
    const outputElement = document.createElement('pre');
    outputElement.textContent = extractedText;

    // Apply some basic styling for better presentation.
    outputElement.style.whiteSpace = 'pre-wrap';
    outputElement.style.wordBreak = 'break-word';
    outputElement.style.fontFamily = 'monospace, "Courier New", Courier';
    outputElement.style.fontSize = '14px';
    outputElement.style.padding = '15px';
    outputElement.style.border = '1px solid #ccc';
    outputElement.style.borderRadius = '5px';
    outputElement.style.backgroundColor = '#f9f9f9';
    outputElement.style.textAlign = 'left';
    outputElement.style.lineHeight = '1.5';
    outputElement.style.maxHeight = '500px';
    outputElement.style.overflowY = 'auto';


    return outputElement;
}