videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Vue.js Canva Clone PDF & Image Editor Using jsPDF, Fabric.js & Html2Canvas Library in TS
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-vue-js-canva-clone-pdf-image-editor-using-jspdf-fabric-js-html2canvas-library-in-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will actually show
0:04
you a vuejs canva clone image and PDF
0:08
editor that I developed inside browser
0:11
and also I have deployed this website on
0:15
my website freemed tools.com sview canva
0:18
clone so you can actually check out this
0:20
tool so this tool looks like uh very
0:24
much like canva you will see that the
0:27
interface the UI looks like canvas so we
0:30
have the templates right here if you
0:32
click templates you can basically select
0:34
any template that you want and then you
0:36
can edit it change the
0:39
text like
0:43
this so we have various templates out
0:46
there you can even add your own
0:47
templates once you get the source code
0:49
you can add the templates in a folder I
0:52
will show you the source code it is
0:53
coded inside vuejs it is using JS PDF
0:56
HTML to Canvas and fabricjs library and
1:00
also we have different shapes out there
1:01
you can add all these shapes it is
1:04
actually there in
1:07
SVG if you want to create a new document
1:09
you can simply click new uh this will
1:12
remove this design so you can just need
1:14
to conf confirm it you can add multiple
1:17
Pages as well like canva so there is an
1:19
option right here if you want to add
1:21
multiple Pages you can add multiple
1:23
pages right here and also there is a
1:26
resize option right here at the bottom
1:28
screen if you want to resize to a
1:30
particular width and height you can
1:32
provide let's suppose I want to provide
1:35
the width to be 500 and height to be 500
1:37
and click resize so your canvas will be
1:40
resized and here you can apply whichever
1:43
background color you
1:45
want various effects are there if you
1:48
want to do Instagram post so there are
1:51
very various presets out there Instagram
1:53
story you will see Facebook post
1:55
Facebook cover Facebook ad YouTube
1:57
thumbnail YouTube channel full HD
2:00
invitation A4 card so all these
2:03
predefined sizes are also available if
2:05
you don't want to resize your document
2:07
just selected from these pre predefined
2:10
you can select this very
2:13
easily and also we have the various
2:16
shapes out
2:19
there so these are various shapes you
2:22
can change
2:25
it then we have the ability to actually
2:30
add the
2:34
title you can actually control the size
2:37
of the text by or you can simply use the
2:41
ma mouse here just place the text
2:44
anywhere you can add
2:46
multiple
2:54
text you can perform you can change the
2:58
color like this
3:01
so here if you want to change the
3:02
background color you need to go to the
3:04
background section and here you can
3:06
change the background color like this
3:08
really
3:09
easy so now if you want to export this
3:12
design you have this option of save as
3:14
and either you can save it as PDF
3:17
document if you select PDF Your Design
3:19
will be saved as a PDF document if you
3:22
see so if you want to save it as a image
3:25
file then you will simply select image
3:28
so there are various options out there
3:30
you can export this to PNG jpg BMP webp
3:33
so let's suppose if I select PNG so now
3:36
if you see the export design has been
3:39
successfully exported to PNG and let me
3:42
show you the second one jpg also the
3:47
same so we also have the option to which
3:51
is BMP which is also an
3:57
extension like this so webp is actually
4:01
a new extension which runs in the
4:03
browser which actually is optimizes the
4:06
size of your image so it's very good for
4:08
web thumbnails so all these extensions
4:12
are supported and if you want to search
4:14
images from unsplash you will basically
4:16
search any images you can S Type your
4:19
laptop if you want to get laptop images
4:21
so it is coming through unsplash we
4:23
using the unsplash API to actually get
4:26
all these images dynamically you can use
4:28
these images like like this as a
4:33
background so there's also this or you
4:36
can upload your own images as well so
4:38
there is an option here you can select
4:41
multiple
4:42
images and then if you want
4:45
to want to delete a page you can simply
4:48
click the remove button so that page
4:50
will be removed so if you want to add a
4:52
image it's very
4:54
simple click the plus icon so your image
4:57
will be added you can place the image
4:59
according
5:00
just can make a very awesome little
5:04
thumbnail so same thing that we do in
5:06
canway we the interface is quite natural
5:11
and you will find it very easy so now
5:15
you want to export this you can export
5:16
this with image the PDF document so you
5:19
will now see the successfully the image
5:22
is successfully exported and uh we have
5:26
also the different layers out there if
5:27
you see we have different layers we have
5:30
the image layer which is there the text
5:33
layer each and everything you can even
5:35
lock your image file there is lock
5:38
option you can change the opacity of
5:41
this image control it transparency you
5:43
can change the position align it top
5:46
left Center every every location you can
5:49
rotate this as well by selecting all
5:51
these options so all these controls are
5:53
there we also have the undo and redo
5:56
options as well
6:01
so we also have this undo redo options
6:03
as well
6:12
so so it's a fully flesh editor guys
6:15
which where you can actually export Your
6:17
Design to PDF image and uh you can
6:21
individually delete this image if you
6:24
don't want to by clicking the dpin
6:28
icon you can even apply effects to your
6:30
images so you
6:33
can basically blur your image like this
6:36
there is an effect out there if you want
6:39
to change the brightness you can change
6:40
the brightness like
6:44
this so these are all the different
6:47
effects which are there border you can
6:50
add any border of your color let's
6:52
suppose I want to add a white
6:57
border so these are different Corner
7:00
radius you can even
7:04
give if you want to give it a shadow
7:07
there are various controls out there you
7:08
can play with this editor guys I'm not
7:10
good at designing so all these things
7:12
are there you can just see the power of
7:14
this editor you can put Shadows you can
7:16
add box Shadows everything you can add
7:19
borders as well you can apply all these
7:21
effects to these images and now coming
7:23
back to the source code this is actually
7:25
the full directory structure you will
7:27
get after you make the payment the link
7:28
is given in the description you can go
7:30
to my website procore.com and after you
7:33
purchase it you will actually be
7:35
redirected to Google Drive you will
7:37
where you will be getting the zip file
7:39
which will contain this directory
7:41
structure and inside the source
7:43
directory we have this all this code so
7:45
we have the different components out
7:47
there it as you can see all these
7:49
components are coded inside vue.js and
7:52
uh the latest version of view which is
7:54
view3 and if I show you the package.json
7:57
file the different dependencies that we
7:59
are using we are using the fabricjs
8:02
which is a open source Library we are
8:04
using the JS PDF Library which is again
8:07
a op Source PDF library and also we are
8:09
using HTML to Canvas Library which is
8:12
again a open- source library for
8:14
exporting the HTML to
8:17
Canvas so we also have the option to if
8:21
you don't belong to English language if
8:24
you don't comfortable you can select
8:26
your own native language Portuguese
8:28
Dutch France language Italian Spain
8:31
Spanish all these languages are
8:33
supported if you now you will see your
8:37
text will be converted to your
8:39
respective language so if you're not
8:40
from English country you can select all
8:44
all all of these native language which
8:46
are supported so once you get the source
8:48
code you can actually edit this project
8:50
to add more languages to add more shapes
8:53
more images so actually the directory
8:55
structure is there for each and every
8:57
style right here so data this actually
9:01
contains the templates so you can add
9:03
more templates once you get the source
9:06
code once you understand the source code
9:08
you can add your own templates as well
9:10
in this file the template. TS all this
9:13
coded inside typescript and we also have
9:16
the folder for different assets you will
9:19
see these are SVG files which we
9:22
actually use as different shapes you can
9:24
add your own shapes as well by actually
9:26
converting it to SVG file so you can add
9:29
your own shapes as SVG files once you
9:31
get the source code so before purchasing
9:33
it you can actually try this full demo I
9:36
have deployed this demo on freem mediat
9:38
tools.com view canver loan so before
9:40
purchasing it you can actually try this
9:42
demo if you like it then only purchase
9:45
it and you can see that so all this code
9:47
is there we are not using any third
9:50
party or paid Library it is all open
9:55
source so once you purchase it you will
9:57
have full commercial right to actually
9:58
deploy this to any website or use it or
10:02
modify the source code everything you
10:04
have the right so I showed you all these
10:07
open source libraries we haven't used
10:09
any third party subscription based
10:11
Library so these are all open source
10:13
libraries I built this from scratch and
10:17
uh you can just see
10:19
so the SAS you can see this is all the
10:24
stylesheet which is
10:27
there so this is the app View view
10:30
folder so it's a fully flash editor and
10:33
basically we are running it on Local
10:35
Host so once you get the source code you
10:37
just need to initialize go to the
10:39
directory and just initialize this
10:41
command npmi so this will actually
10:44
install as a Dev all the modules now you
10:47
just need to npm run Dev to actually
10:50
start that as a local development
10:52
environment npm run T So V will actually
10:57
start a new development server which is
10:59
Local Host
11:01
5173 so if you visit Local Host
11:06
5173 you will actually see your project
11:08
will be
11:10
started so it will take some time
11:12
because it's a huge project so 5 10
11:15
seconds it will take for the very first
11:17
time so just wait for the project to get
11:22
started it needs to compile all those
11:25
assets all those images and then it will
11:27
start you'll see 5 10s seconds and then
11:30
you can
11:31
actually add your
11:34
text you can add your own
11:41
images can see you can save it all these
11:44
things are working so I just want to
11:46
show you locally as well it is perfectly
11:49
working so you can add a back background
11:52
here so then you can export this PDF
11:57
document is also working perfectly
11:59
you can just see so this is actually the
12:03
project and if you want to deploy
12:05
this you can run a command npm run build
12:09
so what it will do it will actually
12:11
create a dis directory in the root in
12:13
the left hand side if you just see if
12:15
you run this a disc directory will be
12:18
created it will compile all your assets
12:20
bundle them into a disc folder where you
12:23
can actually deploy this project into
12:25
any sort of Hosting shared hosting Cloud
12:27
hosting or any VP s hosting so it will
12:30
give you the minified HTML CSS and
12:33
JavaScript code alongside with all the
12:35
assets are available so just see on the
12:37
left hand side it will actually create a
12:39
disc folder so this folder is created
12:43
and now you can just see all the assets
12:46
have been bundled and you can actually
12:48
see the project files which are there
12:51
all the assets the editor different kind
12:54
of phones which are used the lines SVG
12:57
shapes different templates
13:00
so it's a fully fleshed project guys you
13:01
will see this is a starting point of for
13:03
application you just need to run this
13:07
index.html so this is the actual project
13:13
so you can just see you can basically a
13:17
lot of fonts are there unlimited number
13:19
of fonts you can even add your new
13:21
Google font as well if you have a ttf
13:23
file you can click this button and
13:25
simply upload a your own font you can
13:28
download TTT file from Google fonts if
13:31
you try to so there are lots of
13:34
customized Google fonts available you
13:36
can upload this font as well so by
13:38
clicking this and uploading it
13:42
so but we have various customized fonts
13:45
as well but you can select this
13:48
option so various other fonts are there
13:51
you can see how many different kinds of
13:53
phones are there can just change the
13:56
text and these are different line height
14:00
you can control letter space all these
14:02
things are
14:04
customizable so you can try this on free
14:07
media tools view Cana loan on the
14:08
checkout page the link is given in the
14:10
description you can purchase the full
14:12
source code once you purchase it you
14:14
will get the zip file so before
14:16
purchasing it you can actually check out
14:18
the live demo
14:22
so this was I showed you all the
14:25
features guys which is are supported by
14:27
this Sy canva clone
14:30
so thank you very much for watching this
14:32
video and I will be seeing you in the
14:34
next one
#Online Image Galleries
#Design
#Multimedia Software