Issue with Tesseract.js OCR Process Stopping Midway

[beenow011]

I am experiencing an issue with Tesseract.js while trying to recognize text from a cropped image. The process stops after certain console logs, and the text recognition does not complete.

import { createWorker } from 'tesseract.js';

const recognizeText = async () => {
    console.log(2);
    if (selectedImage && cropAreaPixel) {
        setTextLoad(true);
        const image = new Image();
        image.src = selectedImage;
        image.onload = async () => {
            const canvas = document.createElement('canvas');
            const scaleX = image.naturalWidth / image.width;
            const scaleY = image.naturalHeight / image.height;
            canvas.width = cropAreaPixel.width;
            canvas.height = cropAreaPixel.height;
            const ctx = canvas.getContext('2d');

            if (ctx) {
                console.log(4);
                ctx.drawImage(
                    image,
                    cropAreaPixel.x * scaleX,
                    cropAreaPixel.y * scaleY,
                    cropAreaPixel.width * scaleX,
                    cropAreaPixel.height * scaleY,
                    0,
                    0,
                    cropAreaPixel.width,
                    cropAreaPixel.height
                );
                console.log(5);

                const base64Image = canvas.toDataURL('image/jpeg');
                console.log(6);

                setRecognizedText('');
                console.log(7);

                createWorker('eng')
                    .then(worker => {
                        console.log(8);
                        return worker.recognize(base64Image)
                            .then(result => {
                                console.log(9);
                                setRecognizedText(result.data.text);
                                console.log('Recognized Text:', result.data.text);
                                return worker.terminate();
                            });
                    })
                    .catch(err => {
                        console.error('Error recognizing text:', err);
                    })
                    .finally(() => {
                        setTextLoad(false);
                    });
            }
        };
        image.onerror = (err) => {
            setTextLoad(false);
            console.error('Image loading error:', err);
        };
    } else {
        setTextLoad(false);
    }
};

Issue:
The code stops executing after logging console.log(7). The createWorker part seems to be the point where the process halts. Despite adding a logger to monitor progress, it does not proceed beyond the worker creation.

Steps to Reproduce:
Load an image.
Crop the image to a specific area.
Try to recognize text from the cropped image using Tesseract.js.

Expected Behavior:
The OCR process should complete successfully, and the recognized text should be set to the state variable recognizedText.

Actual Behavior:
The process stops after certain console logs, and the text recognition does not complete. The worker does not seem to load or initialize correctly.

Environment:
Tesseract.js version: ^5.1.0
Browser: Firefox Developer Edition
Operating System: Windows 11

---

I would appreciate any insights or suggestions on what might be causing this issue and how to resolve it. Thank you!

[Balearica]

Please provide a reproducible example that can be easily run on other systems. This means either (1) a repo that can be cloned and run easily or (2) a snippet that can be pasted into JSFiddle (or a similar environment), along with any necessary image inputs (if this only happens for specific images). While this OP contains code, it does not look like it can be run by others without modification.

[beenow011]

Thank you for the response!

repo - https://github.com/beenow011/copycode.git

• clone the repo
• install the packages
• run the app

above code is in the file - "src/app/component/ScantoRes.tsx" from line - 118 to 181
when you run the app, go to http://localhost:{PORT}/scan

• select a image from the local drive.
• crop it and click the button CROP.
• Then it's expected to scan the text from the cropped image and show the result.
• textLoad is a loading state, which should be turn back into false, once the createWorker promise is resolved or rejected, but it's staying in the pending state.

[Balearica]

I cloned and ran this code as you instructed, and it appeared to function as intended.

You should confirm that this issue can be reproduced with any image and on any browser. If the issue is specific to only some images, those should be provided with the example. If the issue only occurs on a single device or browser, you likely have corrupted language data cached. You can clear that data by going to Chrome devtools and then selecting Application -> Storage -> Clear Site Data.

[beenow011]

Yes man! It's working on other browsers, but not working on Firefox...!
Anyway, thank you man!
:)