Tesseract.js with React: Tainted canvases may not be exported

Viewed 935

I am currently trying to follow the example given to implement tesseract.js using React: https://github.com/jeromewu/tesseract.js-react-app/blob/master/src/App.js.

However, I keep getting the error:

Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at blueimpLoadImage.orientation

After a bit of research I have discovered it is to do with CORS, however I can't find a solution as the worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png'); function takes a url, not an img (which doesn't get displayed on the web page)

I am very confused and any help would be appreciated!!

Thanks in advance

1 Answers

I face the same issue here. And base on my research, somehow the error appears when you I use Tesseract.js v2.1.4. I already report the issue in Tesseract.js repo. I hope they can fix it soon.

While waiting for the fix, I try to use Tesseract.js v2.0.0 and it works well in my project. In my react app folder I install it by running this command:

npm install tesseract.js@2.0.0
Related