{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爷、活的狠高调 的问题《How to use Tesseract.js in a React app》','https://www.manongdao.com/q-786328.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am working on an app using React. I want to be able to load a pic and then have Tesseract.js convert it to text. I am using react-dropzone to load the image file and I can add the image to page with an img tag. But when I try to run the ocr using Tesseract It gives me this error:
Uncaught SyntaxError: Unexpected token < at blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1 (anonymous) @ blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1
One post I read said to use a CDN, but then Tesseract is not included in my build process, which throws an error. So I think that I have to include it to use React.
I just made a wrapper based on the Typescript Wrapper, using it with next.js (React) and its working.
TesseractWrapper.js
then I just
I know it has been a long time for this question, right now tesseract.js@1.0.16 has fixed the issue, and it can be used with any frameworks like react, vue and angular with no more issues.
P.S. I am one of the contributors for tesseract.js right now, feel free to let me know if you have any issues/requirements. :)
I had the same issue, and then I had to dig a bit to have it working using the CDN.
Here is what I did, I hope this can help a bit as a workaround:
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>in index.html inside<head></head>var Tesseract = window.Tesseract;in App.jsReference : https://github.com/naptha/tesseract.js/issues/134
Try this one:)
1) Install the below node module npm i -S tesseract.ts tesseract.js
2) import Tesseract from 'tesseract.ts'
you are ready to go....