Image Text Identifier Tool

/**
 * Identifies text in an image using OCR (Optical Character Recognition).
 * This function dynamically loads the Tesseract.js library to perform OCR
 * entirely within the browser. It overlays bounding boxes on the detected
 * text and displays the full extracted text below the image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} lang The language code for the text in the image (e.g., 'eng' for English, 'fra' for French, 'deu' for German). A list of codes can be found on the Tesseract.js GitHub page.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the processed image with text overlays and the extracted text.
 */
async function processImage(originalImg, lang = 'eng') {
    // Tesseract.js is a large library, so we load it on demand.
    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // 1. Create the main container for the output
    const container = document.createElement('div');
    container.style.fontFamily = 'sans-serif';

    // Create a wrapper for the image and overlays to handle positioning
    const imageWrapper = document.createElement('div');
    imageWrapper.style.position = 'relative';
    imageWrapper.style.display = 'inline-block'; // Shrink-wrap the canvas

    // 2. Prepare the canvas to draw the image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    imageWrapper.appendChild(canvas);

    // 3. Prepare the UI elements for status and results
    const resultContainer = document.createElement('div');
    resultContainer.style.marginTop = '15px';
    const title = document.createElement('h3');
    title.textContent = 'Detected Text:';
    title.style.margin = '0 0 5px 0';
    const pre = document.createElement('pre');
    pre.style.whiteSpace = 'pre-wrap';
    pre.style.wordWrap = 'break-word';
    pre.style.border = '1px solid #ccc';
    pre.style.padding = '10px';
    pre.style.maxHeight = '300px';
    pre.style.overflowY = 'auto';
    pre.style.backgroundColor = '#f9f9f9';
    pre.textContent = 'Initializing OCR engine...';

    resultContainer.appendChild(title);
    resultContainer.appendChild(pre);

    container.appendChild(imageWrapper);
    container.appendChild(resultContainer);

    // 4. Dynamically load Tesseract.js if it's not already available
    if (typeof Tesseract === 'undefined') {
        pre.textContent = 'Downloading OCR engine (Tesseract.js)...';
        await new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = TESSERACT_CDN;
            script.onload = resolve;
            script.onerror = () => reject(new Error('Failed to load Tesseract.js script.'));
            document.head.appendChild(script);
        });
    }

    // 5. Run the OCR process
    try {
        // Create a logger to show progress in the UI
        const logger = ({ status, progress }) => {
            let message = status.replace(/_/g, ' ');
            message = message.charAt(0).toUpperCase() + message.slice(1);
            if (progress) {
                message += ` (${(progress * 100).toFixed(0)}%)`;
            }
            pre.textContent = message;
            console.log(status, progress);
        };

        const worker = await Tesseract.createWorker(lang, 1, { logger });
        const { data } = await worker.recognize(canvas);

        pre.textContent = data.text || 'No text detected.';

        // 6. Draw bounding boxes for each detected word
        data.words.forEach(word => {
            const box = document.createElement('div');
            box.style.position = 'absolute';
            box.style.border = '2px solid #3498db';
            box.style.boxSizing = 'border-box';
            box.style.backgroundColor = 'rgba(52, 152, 219, 0.2)';

            const { x0, y0, x1, y1 } = word.bbox;
            box.style.left = `${x0}px`;
            box.style.top = `${y0}px`;
            box.style.width = `${x1 - x0}px`;
            box.style.height = `${y1 - y0}px`;

            box.title = `Text: "${word.text}"\nConfidence: ${word.confidence.toFixed(2)}%`;
            imageWrapper.appendChild(box);
        });

        // 7. Clean up the worker to free resources
        await worker.terminate();

    } catch (error) {
        console.error('OCR processing failed:', error);
        pre.textContent = `An error occurred during OCR processing. Check the console for details.
Maybe the language code '${lang}' is incorrect or not supported.`;
        pre.style.color = 'red';
    }

    // 8. Return the final element
    return container;
}