Up next in 10
jsPDF Tutorial to Add Image From Webcam and Encode to Base64 in PDF Using Javascript in Browser
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/d831527724bf49345b242b0bdf087457
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will actually show you
0:04
how to take picture from your web camera
0:07
and uh actually convert this into a PDF
0:10
document add it to a PDF document using
0:13
jspdf Library so you can just see here
0:16
we have I just got access to my web
0:18
camera so this is actually the
0:20
application we have a button right here
0:22
of capture image if I click this button
0:24
right here it will take a snapshot of my
0:26
web camera it will take this Photograph
0:29
and there is a button out there which
0:31
will generate the PDF document so it
0:33
will actually add this image to this PDF
0:35
document so the PDF document will be
0:37
generated and it will actually have this
0:40
image added to the PDF document using
0:42
base 64 code so we will actually convert
0:45
this image which is taken by the web
0:47
camera and we will add this to this
0:49
canvas you will see that as we are
0:51
clicking this button it is taking the
0:52
picture from the camera and it is
0:55
displaying it in this canvas and then we
0:56
are actually converting this canvas to a
0:58
PDF document using Bas 64 code using
1:01
jspdf Library so we will try to actually
1:04
show you guys in this tutorial how to
1:05
take how to insert image taken from web
1:09
camera in the PDF document using jspdf
1:12
Library this will be a complete tutorial
1:14
the link will be given in the
1:16
description if you want the full source
1:18
code so now let's get started by
1:19
building this application so as I
1:22
already told you guys we are actually
1:24
using the jspdf uh Library which will be
1:28
a client side Java JavaScript PDF
1:30
generation Library it has a nodejs
1:32
module but we will be using it in the
1:34
browser using CDN so now let's get
1:38
started so just make a index.html file
1:43
uh this will be
1:46
for just make this uh you can simply say
1:50
jspdf uh webcam image to PDF
1:56
example and for doing this guys we do
1:58
need to include this CDN for
2:01
jspdf which is uh
2:04
actually a script T just after the title
2:07
just include the source
2:10
https cdnjs do cloudfare we'll be using
2:14
the CDM from cloudfare Ax
2:17
lips which is actually a
2:24
library
2:26
jspdf 1.5.3
2:30
this is the version number that we are
2:31
using jspdf
2:33
min.js just see guys we actually getting
2:36
the CDN from cloudfare tocom and this is
2:40
a version number that we using 1.5.3
2:43
jspdf min.js after this we will actually
2:46
have a simple heading we will simply say
2:50
webcam image to
2:53
PDF and then we will have a video tag
2:56
where you'll be actually be showing the
2:59
webcam video of the user we'll be giving
3:01
an ID to it of video we'll be giving a
3:04
width of
3:06
640 and a height of
3:09
480 so here the video will autop playay
3:14
the so video tag and then we will be
3:16
having a canvas where we will be showing
3:18
the output when we take the photograph
3:21
we will be showing it in this canvas the
3:23
width will be the similar which will be
3:25
640 and the height will be again
3:27
480 and uh we have given this canvas
3:31
element an ID here so just at if we
3:33
click the button of capture image it
3:36
will the photograph will be displayed in
3:38
this canvas tag then we have two buttons
3:40
for first for capturing the image we
3:43
have given an ID to it of capture image
3:46
and the label of this button will be
3:47
capture image and the second button will
3:50
be to actually generate the PDF so you
3:52
will simply say generate PDF you'll be
3:55
giving an ID to it of generate so if you
4:00
see in the browser what it looks like it
4:02
actually have a simple two buttons in
4:05
the capture image and generate PDF and
4:08
then we have the canvas tag and the
4:10
video tag it is not working now we just
4:13
need to write the JavaScript code for
4:16
this so now to access the web camera of
4:19
the user we first of all need to get
4:21
access to the video
4:24
element so you'll simply say you will
4:26
Target the video element by its ID that
4:29
we have given document. getet element by
4:31
ID so we have given the video element if
4:34
you see an ID here we are targeting
4:36
right here using get element by ID after
4:39
we get this we need to get the canvas
4:41
element as well so const canvas
4:44
document. get element by ID canvas so we
4:48
are simply targeting the ID that we have
4:50
given to the canvas element if you see
4:51
we have given an ID here we are simply
4:54
targeting it after that we need to get
4:56
the context here of the canvas you can
5:00
simply use the function canvas. get
5:03
context 2D context we need to get and
5:06
then we need to Simply bind a onclick
5:09
listener to the when we click the
5:11
capture image button so we need to first
5:13
of all get access to that button we have
5:16
given an ID here if you see to the
5:18
button we have given an ID so we are
5:20
simply targeting it by get element by ID
5:23
so you need to Simply bind a onclick
5:27
listener so right here first of all as
5:29
we load the
5:31
page we need to get
5:34
access to user web
5:37
camera so for doing this we will be
5:39
using the Navigator API which is built
5:41
in in every browser Navigator do mediad
5:44
devices. get user media get user media
5:48
sorry this will get access to the user
5:51
web camera video we will set it to true
5:54
we don't need the audio of the user
5:56
simply we need the video to get the
5:58
photograph this this returns a promise
6:01
we will be handling it by dot Den it
6:04
will get access to the user stream in
6:06
this stream variable and then we will be
6:09
assigning this to the video element
6:12
video. Source object is equal to stream
6:16
so if you just write this line of code
6:18
and if you refresh your browser you will
6:20
actually get the user stream if you see
6:23
the camera if I show you we are getting
6:27
access to my web camera so I can see
6:30
myself in the web camera so now after
6:33
getting access to my web camera I need
6:35
to
6:37
capture the image so for capturing the
6:41
image it's very simple we find a onclick
6:44
listener to it add event listener when
6:47
we click this button it will actually
6:49
execute this call back function and
6:51
inside this call back function we will
6:53
actually draw a image on the context
6:56
draw
6:57
image from the webcam video x coordinate
7:01
white coordinate will be 0 0 and then
7:03
the canvas width canvas height that's
7:07
all so if you just now click that button
7:10
of generate if you
7:14
see if you click that button of capture
7:16
image the image will be taken the
7:18
photograph will be taken you will see
7:22
that now to get uh basically add this
7:25
image in the PDF document we will get
7:28
access to the
7:30
generate button
7:32
element so we have given an ID to it of
7:36
uh generate if you see in the HTML we
7:39
have given this ID generate we are
7:41
targeting it by get element by ID and
7:44
then you bind a onclick listener to this
7:47
button as
7:48
well so right here we basically say we
7:52
need to first of all encode this
7:56
image to base 64 code
8:00
so we simply say base
8:02
64 URL so we simply get the base 64 URL
8:07
by using this function canvas to data
8:11
URL this is a function which is built in
8:14
in every browser here we need to provide
8:17
the image extension either it can be PNG
8:20
or jpg because it's a JPG image we will
8:23
simply say like this then we basically
8:26
set the image width so we can get this
8:30
using uh doc. internal for this we do
8:34
need to uh instantiate a new instance
8:37
globally we need to create a
8:40
variable for this we need to initialize
8:44
uh
8:44
jspdf jspdf so we actually instantiate a
8:48
new instance of this class jspdf and
8:51
storing it inside this doc object you
8:54
can see we have included the CDN at the
8:56
very top so that we can create a new
8:58
object of this class of J jspdf
9:00
Constructor and now using this object it
9:03
contains a function right here to get
9:06
the internal width of the page doc.
9:08
internal page
9:10
size. get
9:12
width this will this line of code will
9:15
get the width of the page of the PDF
9:18
document similarly to get the height of
9:21
the PDF document we will declare a
9:24
variable image height document
9:28
internal Dot
9:29
uh page size. get
9:36
height then we will basically add the
9:39
image in the PDF document using JS PDF
9:42
for doing this we have a function which
9:44
is ADD image and we'll be using this
9:48
approach we'll be using this base 64
9:50
code that we got base 64 URL we'll
9:53
simply pass it to this function base 64
9:56
URL and then it's a JPG image
10:00
and then the x coordinate y coordinate
10:02
and then the image width that we
10:05
calculated and the image
10:07
height that's all so after this we need
10:10
to save our PDF document so for saving
10:14
it we'll use the save function and we'll
10:16
be giving a name to it of output.pdf
10:18
that's all this is the overall
10:21
application guys if I refresh this
10:23
application and repeat this process
10:32
uh if I inspect element let me see what
10:34
is there it is saying jspdf is not
10:38
defined uh let me see guys what is the
10:43
problem uh JS PDF is not
10:46
defined I think I made a mistake in
10:49
getting the CDN let me paste the correct
10:55
CDN all the source code is given in the
10:58
description guys so just make sure that
11:00
you do
11:02
this now you can see we are getting the
11:05
camera stream right
11:10
here so if I click this button of
11:13
capture image it will take the
11:14
photograph and then if I click the
11:16
generate PDF it will add this image in
11:18
the PDF document with full full width
11:21
and full height you can see that so in
11:24
this way you can
11:26
actually take the photograph and
11:30
and encode that image using base 64 code
11:34
and add this into your PDF document
11:36
using jspdf Library this is a complete
11:39
example and the full source code is
11:41
given in the description of this video
11:43
so thank you very much for watching this
11:45
please hit that like button subscribe
11:47
the channel as well uh for more videos
11:49
like this and I will be seeing you in
11:51
the next one
#Flash-Based Entertainment
#Multimedia Software
#Other
#Computer Education