videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Word DOCX & PDF Canvas Editor to Sign & Add Watermark Using jsPDF & Fabric.js in Javascript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-word-docx-pdf-canvas-editor-to-sign-add-watermark-using-jspdf-fabric-js-in-javascript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this live
0:03
stream so in this live stream I will
0:05
basically show you a application that I
0:07
developed inside browser in JavaScript
0:10
and HTML so this application allows you
0:12
to actually make PDF documents and Word
0:16
Documents in browser and uh you can
0:18
basically change the title
0:21
here it's a viiv editor here we have all
0:25
the controls out there you can construct
0:28
your PDF document so let's suppose I
0:30
want to Center this so I can simply just
0:34
use these viic editor controls so it's a
0:37
complete editor it has all the
0:39
functionalities and uh you can basically
0:41
select whichever title heading that you
0:43
want to select you can even right
0:46
click select all the thing that you want
0:50
to do and then you can even digital sign
0:54
you can add Watermark to your PDF
0:56
documents as well so as a right click
0:59
basically
1:00
there will be this sign option I can
1:02
basically write the my signature and
1:04
basically do the digital signature
1:07
inside PDF document so you will see now
1:10
your signature will be
1:13
there so you can view it you can also
1:15
download your signature as a PNG file as
1:17
well so this is a transparent PNG file
1:19
which is downloaded of your signature
1:22
you can see that so in this
1:25
way you can embed the signature and
1:31
you can move it using your keyboard as
1:33
well so as you reload the application
1:36
you will see something like this you
1:38
just need this language is not English
1:41
so you can basically delete that and
1:43
accordingly customize this accordingly
1:46
whatever that you want to write
1:53
so so you can basically change your
1:56
heading
1:58
so
2:00
so very easy guys you can see
2:04
that how easily you can construct this
2:07
and let's suppose you want to change
2:09
this color highlight this annotate this
2:12
so what you can say is that you can just
2:14
right click it and select this and you
2:17
can change this color so Color Picker is
2:21
there you can see now this area has been
2:23
highlighted this text has been annotated
2:25
with this orange background color so we
2:28
have various options in this editor
2:30
right here we can embed images we can
2:33
underline text we can embed tables
2:35
numbers all this stuff is there at last
2:38
if you want to download this you can
2:39
basically click this uh last button
2:42
which is print button so we can even
2:45
print this PDF document or Word document
2:48
if you want to save it as a p PDF file
2:50
or W you can see that so I want to save
2:54
this as PDF file simply I will click
2:56
save and just select your location and
2:59
click
3:00
save so if I open this now you will
3:03
basically see your changes have been
3:05
take place you will see two pages are
3:08
there this is all the customization that
3:10
you perform right here the highlighting
3:12
is there this is your heading this is
3:14
the underline here this is actual
3:16
Watermark which is present in both the
3:18
pages if you want to add this
3:21
Watermark you want to customize this
3:23
Watermark there is basically this first
3:26
of all this option if you want to embed
3:28
images as well so we can even embed
3:31
images
3:33
accordingly we can just format this
3:35
accordingly just press enter and this
3:38
image will come in the next position and
3:41
you can basically align this image
3:43
accordingly guys by pressing space and
3:45
it will move in the center or you can
3:47
press enter it will go down so you can
3:50
align this properly if you are making a
3:53
eBook it is very much very good software
3:56
that I developed in HTML CSS JavaScript
3:59
you can embed your images accordingly so
4:02
again if you
4:03
click I just want to show you basically
4:06
all the changes will take place the
4:08
images will also
4:10
stay and if I open this now you will
4:13
basically see the image will be there
4:15
the text highlighting is also there so
4:17
if you are interested guys in purchasing
4:19
the source code of this software the
4:20
link is given in the description you can
4:22
purchase it and after that you can get a
4:24
zip file uh something like this you will
4:27
get a zip file after you extract this
4:29
you will actually get your CSS
4:30
JavaScript and uh HTML code this is
4:33
actual directory structure we have this
4:36
minified code right here you can just
4:38
deploy this code on your hosting
4:39
platform if you want to view this uh
4:42
this is the index. HTML file so the link
4:44
is given you can directly purchase it
4:46
from Google Drive after you make the
4:48
payment you will get a zip file you just
4:50
need to extract it it's a total client
4:53
side application you don't need any
4:54
server site code it will work in any
4:57
hosting plan that you have so just
4:59
purchase is the hosting and domain name
5:01
and you can host this application for
5:02
free it's a complete editor and let me
5:05
show you some more features of it and
5:07
let's suppose I want to underline this
5:09
text so I want to change the text color
5:12
so I will now select the text color this
5:14
blue color I want to change it so you
5:16
will see now the text color has been
5:19
changed to blue color and let's suppose
5:21
I want to bold this text or underline
5:24
this
5:26
so now this text has become bold so
5:29
let's suppose I want to here this is uh
5:34
you can see the it will remain whatever
5:37
text I you select right here and uh let
5:39
me change again to Black here so now as
5:42
you type you just need to select this
5:45
first of
5:51
all so you can see now it has changed to
5:57
Black so I'm just showing you some some
5:59
demo here demo text I'm
6:03
writing you can see automatically as you
6:06
write in the document it will
6:07
automatically format to you you don't
6:09
need to press enter it will
6:11
automatically go to this next
6:13
line so as I'm writing right here you'll
6:17
basically see so now I will basically
6:19
show let me select this
6:21
portion change to italic so it will now
6:24
change to italic all these features are
6:26
supported and let's suppose I want to
6:28
highlight this portion so I want to
6:30
underline this I will simply select
6:32
underline so now this portion has become
6:34
underline if you see underline italic
6:37
bold highlighting all this stuff is
6:39
happening and let's suppose uh all this
6:42
stuff is
6:44
there if you want to use this feature
6:48
this will do something like this so it's
6:50
a annotation feature if you want to do
6:53
this highlighting so all these are part
6:57
of visic editor word do doent editor you
7:00
can find all these features in Microsoft
7:02
Word editor but I basically built this
7:05
inside browser so you don't need any
7:07
external software and now if you want to
7:11
basically make another heading sample
7:16
heading so you can basically select
7:18
which heading that you want from this
7:23
drop-down so this is the first heading
7:26
which is
7:28
there
7:33
you can select annotation so you can
7:35
basically say this is some text we can
7:38
to annotate this and now what what will
7:43
happen this is some text so and on the
7:46
right hand side basically if the user
7:49
this is some text so this is showing
7:52
right here so whenever someone hits this
7:55
it will highlight this portion so you
7:57
can basically highlight any portion here
7:59
let's suppose I want to annotate this I
8:01
can simply right click annotation and
8:03
just write something uh this is
8:08
Javascript so now this will be added so
8:11
whenever someone goes to the next page
8:13
when they write it will automatically
8:15
goes to that portion and highlight this
8:17
portion right here you can see that so
8:19
it's very useful for
8:23
that and now I will basically show if
8:26
you want to embed tables in the PDF
8:28
document so there is a option here to
8:31
actually embed a table so 3x4 so three
8:35
rows will be there four columns will be
8:36
there so you will see the table has been
8:38
inserted you can basically give the
8:42
column
8:45
names like this and you can align them
8:48
properly like
8:52
this by pressing
8:58
space
9:01
just T press the Tab Key and it will in
9:04
in the normal so in the center of the
9:06
screen
9:14
so so you can see that guys how easy it
9:17
is to actually do
9:25
this you can construct your PDF
9:27
documents very easily what documents
9:29
accordingly if you're constructing a
9:31
eBook then it's very useful
9:37
software so now if I want to just save
9:42
this work I can save this
9:49
now so if I try to open this
9:52
now just show you so now you can see all
9:56
this stuff has been saved guys with all
9:58
the functionalities that we have done
10:00
right here you can see that this is
10:03
actual heading this is the subheading
10:05
this is actual table which is inserted
10:07
this is actual heading right here this
10:09
is the image that you we inserted and
10:12
you can basically see the watermark
10:14
which is there in gray color if you want
10:17
to now customize the watermark as well
10:19
you can even do that as well let me show
10:21
you there is an option right here which
10:24
first of all let me show you the
10:26
hyperlink so let's suppose I want to
10:29
embed a website here HTTP if you want to
10:33
just share some
10:35
websites and now I want to construct
10:38
this uh just convert this into a
10:40
hyperlink so if the user clicks this
10:43
link they will redirect to google.com so
10:46
just now you will see it has converted
10:49
into hyperlink similarly
10:56
https so you can see that guys now these
10:58
links are clickable so anytime the user
11:01
clicks the these two links they will
11:02
redirect and now I will basically show
11:05
this option which is if any time you
11:07
want to add this dividing line a
11:10
horizontal line you can basically press
11:11
this option so various options are there
11:15
you can basically do this
11:17
line you can also have these options
11:19
undo if you want to undo something or
11:22
redo something you all basically all
11:25
these controls are there if you see in
11:26
the left hand side corner so if you
11:29
intentionally do does something that you
11:31
want don't don't want to do you can
11:33
press this buttons right here it will
11:35
undo and redo so now let's suppose I
11:37
want to add this horizontal
11:39
line so now this horizontal line has
11:42
been added so this just beautify the PDF
11:45
document that you are constructing
11:48
so so I showed you this Watermark so now
11:51
if you want to remove this Watermark you
11:53
can remove it now you can see the
11:55
watermark is not there now if you want
11:57
to add your own watermark there is an
11:59
option right here if you want to add
12:01
your own Watermark let's suppose your
12:04
company name whatever name that you want
12:05
to add coding sixa you can basically
12:08
customize the color of the watermark
12:10
let's suppose I want this to be gray or
12:14
blue color any color you can choose from
12:17
this Color
12:19
Picker let's suppose I pick this
12:22
color and then you can even control the
12:25
size of size of it as well so 110 let me
12:28
just say
12:29
so now you can see basically the
12:32
watermark has been added guys you will
12:33
see that
12:35
basically and if I try to now save
12:39
this into a PDF
12:46
document so if you open this now guys
12:49
you will see the changes have been taken
12:51
place and you can see the water Mark has
12:54
been reflected you can change the color
12:56
size everything you can customize it and
12:58
you can see the beautiful it is looking
13:00
very beautiful and uh if I click this
13:03
link right here these links are
13:08
clickable uh I think these links are not
13:11
clickable in this
13:13
now uh but you can just construct them
13:17
so that they are looking at
13:19
links I don't know why it is not
13:22
clickable but uh they should
13:24
but you get a sense of it these links
13:28
are clickable the these are if you want
13:30
to embed links you can basically give
13:32
this so apart from that we have more
13:35
options right here let me show you if
13:37
you want to add some more pages so uh in
13:41
this PDF document there is only a single
13:43
page so if you want to add some more
13:45
pages how you can do that so there is an
13:48
option right
13:51
here as you just write something it will
13:53
automatically redirect to the second
13:55
page and automatically your watermark
13:57
will be added if you want to sign this
14:00
page you can right click sign you
14:04
can say sign your signature you can
14:07
place the signature anywhere else in the
14:15
page you can see that press the space
14:18
bar and accordingly just
14:21
uh align this
14:23
properly and there is also option if you
14:27
right click the formatting option so it
14:30
will automatically format that for you
14:32
if you don't want the auto formatting
14:34
but it looks
14:36
good
14:41
so so basically you can just write some
14:45
text right here in
14:47
in Sample
14:49
text so whatever text that you want you
14:53
will write when you just do this so let
14:56
me copy all this text right here
15:11
so you can see that automatically the
15:13
text has been copied and you will
15:15
basically see it has constructed the
15:16
pages and all of these Pages have
15:18
containing the watermark if you see
15:23
that so in this way if you have the text
15:27
already available to you you can just
15:29
copy paste the text and automatically
15:30
your pages will be constructed and then
15:34
in this way 16 pages are there so you
15:38
can save the PDF
15:49
work so you can see it now contains 16
15:52
pages and uh you can see that
15:56
so all these things have in
16:03
there so Watermark if you see right
16:10
here so if you need this uh code guys
16:13
the link is given you can directly
16:15
purchase it after that you will actually
16:17
get a zip file which is this one you
16:19
just need to extract this this will
16:21
basically give the minified code and all
16:24
these images phones will be available
16:26
the CSS code you just need to open the
16:28
this index.html file in the browser you
16:31
can
16:32
directly open it and it will open it in
16:35
the browser and
16:38
uh then you can basically construct your
16:40
documents so all these options are
16:47
there so you can even embed code blocks
16:50
so if you are a programmer let's suppose
16:52
if you want to add some coding Snippets
16:57
so if you are basically a programmer so
17:00
you can also embed these coding
17:04
Snippets so this is I think a python
17:12
code you can
17:14
see so syntax highlighting is also
17:16
supporting if you see already print
17:18
statement it has its own colors right
17:20
here variable names that we declared
17:22
right here so if you have some
17:23
JavaScript code that is available for
17:25
you you can just do this so this is the
17:28
page break thing guys if you want to
17:31
split the pages into let's suppose I
17:35
want this in into a different page so I
17:37
can simply select this option which is
17:40
page break just right here so now this
17:43
will be in the separate page so it will
17:46
split this into different pages right
17:49
here this will be in the different page
17:52
this will be in the different page and
17:53
this so it has split this document into
17:57
three different pages using this tool
17:58
right here which is page break it's a
18:00
very important tool you can basically
18:02
use this tool to actually split the
18:05
pages into multiple Pages based upon the
18:08
text that you have written so now you
18:12
can see that so you can actually write
18:14
some more text right
18:27
here
18:30
so you can see you can more just write
18:32
some more
18:35
text so page numbers you will basically
18:38
see automatically will be there this is
18:40
the first page this is the actual second
18:42
page so as you basically add more pages
18:44
automatic page page numbers will
18:46
automatically gets added we don't need
18:48
to worry about that and uh after that we
18:52
have or more tools control tool you can
18:56
also embed check boxes as well if if you
18:58
want to add if you're constructing forms
19:02
we have this option of uh
19:06
checkbox if you see basically we have
19:09
this checkbox right here we can select
19:11
this unselect this you can have true
19:16
false
19:20
so so if you're constructing uh forms in
19:24
PDF documents you can use these controls
19:26
out
19:27
there
19:32
so this is latex text here you can
19:40
basically so if you want to embed date
19:43
field as well you can even embed date
19:45
fields you you can see that this is
19:48
calendar out there you can select any
19:49
date of
19:56
accordingly so I explained all you the
19:58
controls right here guys and in this
20:00
video if you are
20:02
interested this is order list if you
20:05
want to solid dots if you want to add
20:07
ordered list unordered list all these
20:09
controls Are there picture table that I
20:13
showed
20:15
you you can have this things unordered
20:18
list ordered list this is 1 2 3 so if
20:22
you want to embed list out there you can
20:24
also do that alignment you can align it
20:26
right left Center all the thing
20:30
supported and that's all so this this is
20:32
actual application you can view it in
20:35
full screen mode as well and orientation
20:38
paper orientation portrait it selected
20:41
by default but you can change it to
20:42
horizontal which will take full size
20:46
this is total different zoom in zoom out
20:48
all these controls
20:50
there so paper type you can basically
20:53
select stationary various paper types
20:56
supported A2 A4 4
20:59
A5 you can change this
21:03
accordingly this is actual application
21:06
guys if you are interested the link is
21:07
given and you can directly purchase it
21:10
and you will actually get the zip file
21:12
you can extract this and directly upload
21:14
it to your hosting plan or use it please
21:17
hit that like button subscribe the
21:18
channel and I will be seeing you in the
21:21
next
21:23
video
#Flash-Based Entertainment
#Multimedia Software
#File Sharing & Hosting
#Skins, Themes & Wallpapers