Up next in 10
Build a Tesseract.js OCR Web App to Extract Text From Image in Browser Using Javascript
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/073269b79c480b4955b3053d60da77fc
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we're looking at how to
0:05
actually make a image to text kind of
0:09
application where we will be extracting
0:11
text from a
0:13
image so using a opsource JavaScript
0:18
library called as tess. JS so it's it
0:22
will be OCR uh application image ex uh
0:27
text extraction from the image let me
0:29
show very basic example so this is
0:31
actually the application that we'll be
0:33
building right here where we will
0:35
actually allow the user to actually
0:37
select a JPG or PNG image file and they
0:40
will select the file and simply click on
0:43
this button extract
0:45
text so let me take a example of the
0:48
image here so let's suppose we have this
0:50
image jpg image let me open
0:54
this so you can just see it has a bunch
0:56
of text written in it it has a blue b
1:00
background and a bunch of text is
1:01
written inside this image so we need to
1:04
actually extract this text and display
1:07
it inside the text area
1:09
so as we select this image and click on
1:12
this button extract text so what will
1:15
happen the library will be initialized
1:17
and all the text which was present
1:19
inside the image will be
1:22
extracted so you can just see right here
1:25
you can take any image for example it
1:27
can contain as much text as possible
1:30
and then this Library will extract that
1:32
text from that image and display it
1:35
inside the text area so the library that
1:38
we are using for this purpose is uh
1:43
tessera
1:45
dogs so it's a pure JavaScript
1:49
OCR uh image to text recognition library
1:53
in 100 languages so text can be printed
1:57
in any language it is not limited to
1:59
English it can be any language native
2:02
language and then it will actually
2:05
extract that text they also have a demo
2:07
as well you can try them inside their
2:09
official website this is
2:13
the this is a GitHub repo and now to
2:18
actually
2:20
initialize or make this
2:23
application we will be using the CDL it
2:26
can even be used in nodejs environment
2:28
as well
2:32
so for this we just need to create a
2:34
basic template of index HTML so if you
2:37
need the full source code the link is
2:39
given in the description of this video
2:41
so you'll simply say
2:45
JavaScript Tesseract JS
2:48
OCR image to text
2:56
example and for building this
2:58
application we are using Tailwind CSS UI
3:01
framework so I will simply include the
3:02
CDM for that also so after this we will
3:06
be writing the HTML so we'll be changing
3:09
the background color of the BG gray
3:14
100 and then we will use the these
3:17
Tailwind classes to make the interface
3:20
right in the center of the
3:23
screen so inside this we have this
3:26
heading
3:43
and then we will allow the user to
3:46
select a image file using the input
3:48
element so input type will be her file
3:51
and we'll be giving an IDE to it of
3:53
image input and uh it can even only be
3:56
accepting images so we can provide image
3:59
attribute
4:03
image/
4:07
star and it should be
4:12
required so this accept parameter
4:15
represents that it can even only accept
4:20
images and then we can give it a
4:22
Tailwind
4:25
class mb4
4:31
so if you open it in the browser it will
4:33
look something like
4:39
this then we will have a simple button
4:43
which will simply say extract
4:48
text we give it a ID here which is
4:54
extract
4:57
button then we will be giving
5:00
a class of BG blue 500 this will change
5:04
the background color of the butn to be
5:06
blue and when we hover onto this it's a
5:10
pseudo
5:11
class the background will change from
5:14
500 to 700
5:17
shade text will be white font will be
5:22
bold P white this is padding from the y
5:25
direction padding from the X Direction
5:28
and the button will be rounded
5:31
so it will look something like this you
5:33
will see that
5:37
so uh lastly after this button we also
5:40
need a text area where we can actually
5:42
display the extracted text so you can
5:46
give it an ID here of output text
5:53
area then some classes to it
6:00
width will be full of this text area so
6:03
now to make the width full W full
6:06
class to change the height it is height
6:11
40 margin from the top four padding two
6:17
and background color will be
6:19
white and Border gray
6:25
300 it will also be
6:28
rounded so it will look something like
6:31
this this text
6:32
area so the interface is almost
6:39
complete so this text
6:49
area so after this we also need a copy
6:52
to clipboard Button as well uh just
6:55
below this text area so that the user
6:59
can click that button to actually copy
7:01
the text to
7:08
clipboard give it an ID here of I copy
7:11
button and the class of BG
7:14
green
7:24
500 text WI
7:32
same Styles I'm just using for this
7:35
button just the color has been change
7:37
from blue to
7:43
green so you can just see we have coded
7:46
this UI here and now to actually write
7:50
the logic we will be writing
7:53
JavaScript so as I already told you we
7:56
do need to include the library of tesser
7:59
so I will simply paste the CDN here you
8:03
can easily get this CDN or you can just
8:06
type on Google tesser xjs OCR CDM so you
8:12
can go to cdnjs
8:14
docomo this
8:16
link this is the CDN link for this
8:20
library and you can paste it
8:23
here and now for writing the custom
8:27
Javascript file we can make a script.js
8:29
file where we can
8:32
write the JavaScript code so here we
8:35
will need to get the references of all
8:37
the
8:39
elements so we have given the IDS in the
8:42
HTML so one by one we can need to
8:46
get so image
8:53
input we have given an ID here image
8:56
input to the
9:00
input
9:02
element similarly that extract button we
9:06
have given an
9:15
ID two more times we need to tast it so
9:19
this time this will be for the text area
9:21
we need to get reference in the
9:24
JavaScript we have given the
9:27
Dom text area ID here output text area
9:32
and then this copy
9:35
button we also have given an ID of copy
9:38
button you can cross
9:40
check can just
9:46
see so we're just getting the references
9:49
in the HTM JavaScript so that we can
9:52
Target
9:53
in so all these four elements we are
9:55
getting it in the JavaScript after doing
9:58
this when we click the exract button we
10:00
need to bind a onclick listener so this
10:03
call back function will execute so now
10:06
here we need to get reference to the
10:09
actual image file which is selected so
10:12
we can get this using image input do
10:15
files and we need to only get the first
10:18
file which is selected because we are
10:19
only allowing the user to select a
10:22
single file so it will be present in the
10:25
zero element as indexing starts from
10:28
zero and here you'll be comparing if and
10:30
the file is uh correctly selected then
10:35
in that case we need to get extract the
10:38
content of the
10:41
file now to extract the content we'll be
10:44
using the file reader API which is a
10:48
built-in library in every
10:51
browser so it has a event called as on
10:57
load and here we can
11:00
actually make a new image Constructor
11:03
and this is a very standard way of
11:05
actually reading a file using file
11:08
reader we will get the base 64
11:17
result and then when this image is
11:19
loaded we will have this on
11:24
load and here you'll be using this uh
11:27
tesser
11:30
image to
11:33
text Library so for doing this we can
11:36
directly use
11:38
tesser and it has a function called as
11:42
recognize so it is
11:45
a it will recognize all the text from
11:48
the image and here we need to pass the
11:50
image as a first
11:53
argument like this this will return a
11:56
promise we can handle this using dot
11:58
then
12:03
so we just need to
12:06
extract only the data property so we can
12:10
write here cly
12:11
bracket colum and then another cly
12:15
bracket which will be
12:21
text and here we can simply make the
12:24
output text area value to be text
12:38
and after we do this we do need to write
12:40
a very significant line just outside
12:44
this
12:45
uh this function called which is reader.
12:49
onload this will not be invoked
12:51
automatically we do need to write a line
12:53
for that which will be reader. read as
12:57
data URL
13:00
and we need to pass the selected file
13:03
so we are initializing the file reader
13:06
API and here we using read as data URL
13:10
so this function will uh read the base
13:13
64 code of the selected file and then
13:16
this function will execute and TCT will
13:19
recognize all the text from the image
13:22
and it will output inside output
13:25
exterior so if I just refresh the
13:27
application
13:31
if I choose a image
13:35
file click on extract text you will
13:38
actually see all the text all the text
13:41
which was there in the image has been
13:43
extracted and it has been shown in the
13:47
text
13:48
area so in this way you can do this and
13:52
now if I click the copy to clipboard
13:53
button we do need to bind a on click
13:56
listener to here also
14:06
so we need to select all the things
14:09
which are using the select method output
14:12
text area
14:24
select and then we just need to execute
14:27
the copy command so we can use this uh
14:29
buil-in
14:31
function and the command here is
14:37
copy so then we can show alert
14:40
statement text copy to
14:55
clipboard you can see we are taking this
14:57
image
15:01
extract text you will see that and if I
15:05
click copy to clipboard you will see
15:06
that a text message will be written text
15:09
copy to clipboard so if you want to try
15:12
this tool online I have also deployed
15:14
this tool on my website freem mediat
15:16
tools.com you can try this
15:20
Tool uh I think it is
15:26
image OCR I
15:50
you can search for this Tool uh there
15:51
are lot of tools out there in freem
15:53
mediat tools.com
15:55
this is the official website of so
15:59
if you need the full source code the
16:01
link is given in the description thank
16:04
you very much for watching this video
16:06
and uh I will be seeing you in the next
16:09
one
#Clip Art & Animated GIFs
#Education
#Open Source
#Programming