CODEWITHSUNDEEP
javascripttesseracttesseract.js
Steven Steggles
Steven Steggles

Reputation: 29

Tesseract - Use in Browser Console

I am trying to use Tesseract within the browser console. This is for a site for which is not my own so I cannot embed external scripts for security reasons, hence why I run my code in the browser console. However, it is only for personal use and for intention of reading data from a canvas image.

I embedded the JS from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tesseract.min.js' and then ran the following from the examples page of Tesseract GitHub pages:

(async () => {
const worker = await createWorker('eng');
const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
console.log(ret.data.text);
await worker.terminate();
})();

Which produces the following error (also because of security issues.): 'VM11097:6 Uncaught (in promise) Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.jsdelivr.net/npm/[email protected]/dist/worker.min.js' failed to load.'

Is it possible to compile the Tesseract JS files into a single block of code? Essentially, I want to bypass anything which involves referencing an external source.

Many thanks, greatly appreciated.

Upvotes: 0

Views: 182

Answers (1)

HosseinHosni
HosseinHosni

Reputation: 1

first of all, that seems you want to using tesseract library.
So, before anything you should import it into the browser, to achieve this, run this code:

import('https://cdn.jsdelivr.net/npm/[email protected]/dist/tesseract.esm.min.js').then((tesseract) => {
    // your code goes here
});

Then, you need to createWorker. To use it, you can use this code:

import('https://cdn.jsdelivr.net/npm/[email protected]/dist/tesseract.esm.min.js').then((tesseract) => {
    const createWorker = tesseract.default.createWorker;
});

And finally, your code should be convert to this:

import('https://cdn.jsdelivr.net/npm/[email protected]/dist/tesseract.esm.min.js').then(async (tesseract) => {
    const createWorker = tesseract.default.createWorker;
    const worker = await createWorker('eng');
    const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
    console.log(ret.data.text);
    await worker.terminate();
});

Because you used await, I convert the callback method to async.

I hope this helps you!

Upvotes: 0

Related Questions