Build A Javascript OCR App Tutorial
ฝัง
- เผยแพร่เมื่อ 17 ก.ย. 2019
- Check out my courses and become more creative!
developedbyed.com/
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
Today we are building a new exciting javascript project!
We will be using OCR (optical character recognition) to recognize an image and extract all the text from it.
We will be using a few packages such as express, multer and tesseract.js. At the end we will convert our image into a pdf.
If you feel like you need more practice with node.js or you just want some project ideas I highly recommend you to follow this tutorial!
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#javascript #ocr
![[TH] 2024 PMWC x EWC Group Stage Day 2 | PUBG MOBILE WORLD CUP x ESPORTS WORLD CUP](http://i.ytimg.com/vi/vwIQyCmNIBU/mqdefault.jpg)
For anyone who is still struggling with 'const worker = new TesseractWorker()' is not a constructor. Just do everything exactly as shown in the video.
Just use npm install tesseract.js@2.0.0-alpha.15 to use the exact same version of tesseract as used in the video.
Not sure if this is necessary but make sure you have "tesseract.js": "^2.0.0-alpha.15" mentioned as a dependency in your JSON file.
***
const {TesseractWorker} = require('tesseract.js')
const worker = new TesseractWorker();
Thank u brother
WoW! looked for solution all around in web but finally solution i want was down in comments!
Thank you pal GOD bLESS YOU!!!
Thanks a lot brother worked for me
Wow, this is so impresive! Great job, and thanks for sharing with us! Cheers!
Thank you and Happy anniversary!
man I just want to say thank you, I've learned so much from you and done so many awesome projects I though it would take years for me to see realized. I am about to start college and I hope I get to meet people as passionate and good explaining stuff like you, You have been a real motivation to keep coding and learning, dont stop man , I wish happiness and success to you.
Thanks
sooo....... hows college going? just curious
@@naveenarora6467 bad as fuck
cool tut as always, keep up the good work :)
wow! what an work it is ......an effortless work from this man
Hello my gorgeous friend on the internet
hi
Hello. my. gorgeous. friends. on.. the.. internet..
You are more than our expectations. Power to Dev Ed.
i think im in love, these are the best tutorials ever
Awesome your tutorials are very creative
Such a good and useful tutorial!
great tutrl
btw, thumbnail is classy!
Nice video as always Ed ! But how abt my Bar Chart Race tutorial in D3.js 🤔
Fantastic work, man! I love your over 8570 level of humor, by the way!
just make it over 9000 if you had watched dragon ball z when vegeta's scouter explodes and he says the power level is over 9000
@@meteachesprogramming9395 I was hinting to the fact that it's not 9000 just yet, but getting there. :)
For anyone still struggling with 'const worker = new TesseractWorker()' is not a constructor. TeseractWorker is depreciated in versions 2+ so we use createWorker() instead.
Here is the fix:
Replace all forms of TesseractWorker with createWorker() for versions 2.0+ of Tesseract by using npm install tesseract.js@next and npm install tesseract.js-core
Install tesseract.js-core link: www.npmjs.com/package/tesseract.js-core
Make sure to remove ^ the carrot sign before tesseract.js within the package.json which forces the dependency to be the newest version. Not sure if this step matters but the code below is what you use instead of TesseractWorker() which is depreciated in the 2.0+ versions.
SOLUTION:
const { createWorker } = require("tesseract.js");
const worker = new createWorker({
logger: m => console.log(m)
});
... rest of backend code in app.js
You have great sponsors. The message was clear. But the project is nice.
I subscribed within the first minute itself, The way you teach is funny and we can watch without getting bored. It would be great if you could share the code as well :D
The video is awesome great work
Ed back with the great projects
Edit : just finished your react tutorial series
You are an amazing teacher.
Dev that’s really helpful ! Can we do this I. App script to execute in google sheet?
Love your videos
Awesome Ed it is great:)
Thanks ED!
In new tesseract.js a lots of commands have changes. Please make a update tutorial 🙏🏼🙏🏼
I have complex tables in my PDF file, will the text output of the OCR deliver the text content in the same format and representation as in the table cell contents of the PDF
I have been looking for this for a long time
U always get me with the thumbnail😂
Hey Ed, Which theme of visual studio you use?
Instead of using saved image can we use camera of device to dynamically convert image to text?
Nice work bro. Can you pls create passport scanner app. Which scans the passport and extract all the information.
Can anyone tell me the course where I can learn whole express , like file uploads, videos.
😂😂😂 first minute and I love the total randomness
orange cucumber raspberries this abbreviation's gonna stay in my mind forever
dude ... u are the best
You the best ! Appreciate dat
ohhh my gggod thats what im looking for thanks ed your great potato ! :)
Can you make a video about wordpress for beginners and even with some web development knowlegde!
Lol the toothpick :) great work
Hi, will it work even the image has dot matrix characters ?
I think you have to do process.env.PROCESS || 5000; because if you are deploying... It will find PORT in env variable and then set it to app.. What you did will always set it to 5000 no matter the env has PORT or not
It depends, if any of you're core dependencies has already defined port, then it will use that else the other defined port
Hi bro, can you tell me, best way to extract text from invoice, please do reply, it will help me lot
Is there any better reason to make some OCR tool on TensorFlow and Python that talks to a web app?
Hey bruv!....Worker.progress throws an error "worker.progress is not a function".Any solution? And also for worker.then
arigatou sensei !!! 🙏
The Google API for OCR worked better for me plus there are some paid ones that are very powerful. I was using them to get results from virtual greyhounds straight from the live stream. :)
Hello can you make a video on search with node js
I like the magic 😂😂😂
Can you do a flutter app next?
Something which you would like to use daily, like the anti-nail-biting hand detection project that you did.
watch thenetninja flutter tutorials
@@AmineAmine-qw4xx Not asking for a tutorial. Some complex but useful UI and backend desgin.
Dev Ed you're the best channel for tech and sports!!!
Hey Ed, do what you like, just do it! 0:07
Just wanted to let you know you are awesome.
Nice work bro .. Please always continue to make more videos to develop tools :)
Ed, can you share the code with us please ?🙃
I am getting an Error: TypeError: Cannot read property '_malloc' of undefined. How to overcome this error? I am using tesseract: 2.1.4 and using cretaeworker line
hhhhh you are awesome , learned a lot from you .thank you ^_^.
Which theme u are using??
According to the GitHub repo of tesseract , TesseractWorker has been depreciated and it's alternative is createWorker but it's too not working can any one help me with that ..I am unable to use both the key words also I have tried different versions of tesseract..
use this:
---------------------------------------------------------------
const { createWorker } = require("tesseract.js");
const worker = createWorker({});
------------------------------------------------------------------
i just removed the new keyword that was behind createWorker({})
please build like more small vanilla js app.. Thank you for all ur work Big fan from India
I still get the tesseract error not being a object:( after uninstalling and installing the its npm
Same
Still getting the TesseractWorker is not a constructor on both versions :(
Looking for what changed now
github.com/naptha/tesseract.js
I've been looking at issues about the constructor error on github too.
Did you ever figure it out?
Fix:
github.com/naptha/tesseract.js/issues/346
I'm on mobile so no correct syntax but
Changing to "tesseract.js" : "2.0.0.alpha.13",
And
tesseract-js-core : 2.0.0-beta.11
^ Add those to package.json
Plain `npm install` for dependant
Remove any "^"'s from the package . json so it takes both versions (I think that's how you do it? Someone smarter than me can correct:) )
Changing those in package.json seemed to get the app working.
Ily
Can we extract text from scanned PDF(PDF of images) using OCR?
I challenge you to create a photoshop-style app (online in javascript), where we can do small manipulations on images and save them.
thank you. can we hv the source code plz?
Amazing tutorial! After poking around with newer Tesseract syntax I got it working wow. If you are stuck, you'd want to search for the documentation on your version of Tesseract.
Hi! I've been trying to make the code work with the current version of Tesseract and I just can't seem to make it work, how did you make it work exactly? Thanks!
Anyone know what his visual studio code theme is? love it
Material Theme Palenight High Contrast
Oceanic Next (dimmed bg)
Please make a deploying app tutorial :)
super!!🤩
Thumbs up for magic trick! Even with funny fail!
what kind of syntax is const upload= multer({storage:storage}) ? (i don 't get what does the storage:storage do)
thanks you if you will reply
You set the property "storage" of the object to the previously defined variable "storage", while here they have the same name its not necessary
Which theme you used for vs code
use this code I gave blow instead of -> "new createWorker();"
const { createWorker } = require('tesseract.js');
const worker = createWorker({
});
Thanks, it worked
it will be always port 5000, because it's always true, doesn't it?
Yes, he put it the wrong way around. :-)
cool af!
can you put a link for this project?
nice job , wish you had the code for this on github tho
Cannot read properties of undefined (reading 'transfer-encoding') Getting this error 17:05
do you msybe know of anything similar which also works for handwriting?
Is it possible to get only the first name and last name on the ID card?
when i click to convert, its pointing this error:
"TypeError: Cannot read property '_malloc' of undefined"
the tesseract on javascript is really really slow.... i tried it myself.
which tesseract version to install
Came for the magic trick, stayed for the tutorial..
I am getting an error when i am using pdf file to ocr...
Error. Tesseract can't recognize pdf file
also made tutorials on Jquery...
After I click Convert and it the OCR does it thing and redirects, I'm getting "Cannot GET /download". It doesn't seem to be creating the ocr-result.pdf file. I had to rewrite the worker since the newer version of tesseractjs doesn't like how it's done in the video.
const { createWorker } = require('tesseract.js'); // OCR
const worker = createWorker({
logger: m => console.log(m),
});
app.post('/upload', (request, response) => {
upload(request, response, err => {
console.log(request.file);
fs.readFile(`./uploads/${request.file.originalname}`, (error, data) => {
if (error) return console.log('ERROR: ', error);
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize(data);
//console.log(text);
response.redirect('/download');
await worker.terminate();
})();
});
});
});
yeah same error
Buen video wey!
Why you dont upload your apps???
This is so fucking cool.
I guess it'll be a trouble if two or three users convert images in the same time XD
how about mentioning that it's node/server side in the title
constructor error. This solved the issue ->
const worker = createWorker({
logger: m => console.log(m)
});
Still getting the TesseractWorker is not a constructor on both versions :(
Looking for what changed now
github.com/naptha/tesseract.js
make a background remover app Please
Love
Hi, I got an error: TypeError: TesseractWorker is not a constructor. Does anybody know how to fix this?
Thanks
I tried this and it worked:
const Tesseract = require('tesseract.js')
const worker = Tesseract.createWorker({
logger: m => console.log(m)
});
@@iqaznili Thanks bro!!
"Organge, Cucumbers, and Raspberries" hahaha
How to make this web app on online? What webhosting sites should i use
try deploy using heroku
More magic tricks Daddy
Coolest Programmer on TH-cam 😛🤣😜🤩🤩
Can you make a PWA please!!
PWA is lame. just do native
@@midsummerstation3345 how can i start native i don't have sufficient knowledge of native.
@@mustafaaur4019 learn react-native or svelte-native. It's not that hard
@@mustafaaur4019 Instagram is built on react-native yet the performance is good and it's successful