Up next in 10
Build a NW.js FFMPEG Canva Image ,GIF,PDF & Video Editor Desktop App in Vue.js Using Sharp Library
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-nw-js-ffmpeg-canva-image-gifpdf-video-editor-desktop-app-in-vue-js-using-sharp-library/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this live
0:04
stream so in this live stream I will
0:06
basically talk about a desktop
0:08
application that I developed inside
0:11
vue.js which is a specifically a canva
0:14
clone video and image GIF and PDF editor
0:18
so it's a desktop application you will
0:20
see on your screen right here we
0:21
developed in vuejs and it is actually
0:24
making use of fmpg library and we have
0:28
also used the
0:31
sharp Library sharp is basically a
0:38
package inside nodejs to actually make
0:41
image editor applications so this is I
0:45
will show you all the functionalities of
0:47
this desktop application so you will
0:49
basically see on your screen right
0:51
here this is the actual desktop
0:54
application when you launch
0:56
it uh I will basically provide the full
0:59
source code the link is given in the
1:01
description you can directly purchase it
1:03
after purchasing it you will actually
1:04
get a zip file and you just need to
1:07
extract this to get this directory
1:09
structure and the setup file for the
1:11
desktop app will be located in the disc
1:13
folder this is the actual setup file you
1:15
just need to run the setup and uh you
1:18
will be able to install this desktop
1:20
application inside your uh machine so
1:24
simply launch this setup and it will
1:26
simply click next next next to in
1:29
install this software and as we it
1:31
installed it will uh look something like
1:33
this it will launch like this and now
1:36
you need to Simply add some files here
1:40
so you can basically add some files here
1:43
so you will see live preview as you add
1:46
images so it supports all the extensions
1:49
you will see it is showing tiny jpg PNG
1:52
all the extensions of image files is
1:54
supported and you can basically
1:57
uh click on the left hand side you will
2:00
see as I click on this uh if you want to
2:04
compress it you can click this option if
2:05
you want to convert this image to jpg
2:08
PNG or webp format or GI format or icon
2:14
so you can individually click this
2:15
option so let's suppose I want to
2:17
compress this so I will
2:20
simply click this option
2:23
so and
2:24
click you need to select this option
2:27
first of all and there there is
2:28
basically this start option so as you
2:31
start this you will basically get this
2:34
notification that the task is completed
2:38
and uh you will see the image has been
2:41
successfully compressed from 294 kiloby
2:44
to
2:46
128 and if I want to open this path you
2:51
will basically see this is actually it
2:53
is reduced from 294 kiloby to it's the
2:58
same image which has been reduced you
2:59
will see that so this is a first first
3:02
functionality if you want to convert
3:04
this into PNG again you need to you can
3:08
even live preview the image as well like
3:10
this if you want to delete this you can
3:12
simply delete this you can even add
3:14
multiple images like this if you want to
3:18
add multiple images you can even add
3:20
multiple images just do bulk processing
3:23
at one time you will see live preview
3:26
just you can see that you can even
3:28
rotate it like this
3:30
you can make it as full
3:32
screen zoom in zoom out all these
3:36
functionalities are
3:41
there so then if you want
3:44
to now convert all these images to
3:48
PNG so what you will see simply click
3:51
Start so you will see all these images
3:54
will be converted to PNG and you can see
3:57
that
4:00
so output is located in the same
4:02
directory where your input file resides
4:04
so you will basically see it will create
4:06
all these PNG images these are the
4:09
output images that it
4:14
creates
4:17
so now you can delete them like using
4:21
the dust dpin icon and then we have
4:25
also all these formats are there AV
4:32
so if you select jpg if you want to
4:34
convert this into
4:36
Tif so now you can see your image has
4:39
been
4:48
converted if you see
5:00
so then we have uh another you can see
5:02
you can set uh options right here Global
5:06
options are also available it's a a
5:08
complete uh canva clone or photoshop uh
5:12
desktop
5:13
free uh application that I developed
5:16
guys it supports all the options that
5:18
you see in a paid software it's a very
5:20
complex software you'll see all these
5:22
options you can perform you can set your
5:24
output directory let's suppose I want to
5:26
set my output directory inside this or
5:29
to hot key you can change the output
5:31
directory where your output images will
5:33
be stored right here you can change the
5:35
output directory you can even append
5:37
file names you can add some file name or
5:40
overwrite output file name after
5:42
processing what you need to do you need
5:44
to delete the source five it will be
5:47
fast or move source file to trash or do
5:50
nothing so I just want to say after
5:52
processing it delete the source file
5:54
input file or do nothing
5:58
I process multiple image simultaneously
6:01
you can even do pro concurrent
6:03
processing so if you want to do
6:05
concurrent you can just uh process eight
6:08
multiple images concurrently so you can
6:12
even do that also using the slider if
6:14
you want to do concurrent processing
6:16
then we have timeout processing timeout
6:18
for each
6:19
imits and uh all these options are
6:23
available let's suppose I want to enable
6:26
Watermark so I will show you the text
6:29
watermark first of all and uh let me put
6:32
a text water you will see live preview
6:34
right here you can increase the phone
6:37
size and uh you can even provide a
6:41
stroke color which
6:46
is me change the color here using Color
6:49
Picker click on okay and now you will
6:52
see this is actual water mark which is
6:54
there click on okay if you want to apply
6:56
this Watermark you can select the
6:58
position here if you want to just put in
7:01
in the center position all these
7:03
positions supported or you want repeated
7:05
position let me put this watermark in
7:07
the center position and opacity you can
7:10
even control you can rotate this as well
7:12
so let me rotate it at 45° click on okay
7:16
so now all images that you will select
7:19
right here
7:21
uh let me select uh image here this
7:25
image and uh
7:31
I want to say
7:34
Auto Select Auto here and click on
7:43
start
7:44
so okay yeah there is one option right
7:49
here let me delete
7:52
this let me launch this application once
7:57
again so it will launch something like
7:59
this this as you launch this
8:08
application so it is it will be
8:10
installed when when if you don't change
8:13
the directory it will be installed in
8:15
the C drive and there will be this
8:19
uh exe file will be there so it will be
8:21
launched like this and here you can
8:23
select uh I have selected the output
8:25
folder like this and Watermark we
8:29
selected in the center position and if
8:31
you just add your input
8:40
image so we set the global options to be
8:44
like this we enable The Watermark and
8:47
now if I click
8:48
Start so task is completed and if I open
8:52
my output directory that
8:55
I which was a auto hot key and you will
8:59
basically see if I open
9:03
this you will see that Watermark that I
9:06
showed you is successfully added you
9:08
will see that this is actual Watermark
9:10
it is rotated and uh you will basically
9:13
see if you want to increase the size of
9:16
the
9:17
watermark uh just go to the global
9:19
options and
9:22
here just go to your uh
9:29
just increase the phone
9:31
size just make it
9:36
bigger you can do it like
9:48
this click on start
10:03
so you will now see the water mark is
10:04
slightly bigger we changed the phone
10:06
size you will see that so you can even
10:10
uh me delete all these
10:14
files you can even basically repeat this
10:18
as well in repeated
10:23
fashion so Watermark will be repeated
10:38
just select repeat and uh again you do
10:41
the same
10:45
process click on
10:51
start so now you can see that so
10:53
basically the watermark will be repeated
10:55
you can just stylist guys accordingly
10:58
the options are supported
11:00
uh it's a very complex software that I'm
11:03
giving you guys the link is given you
11:05
can directly purchase it and with this
11:07
software installed on your machine you
11:09
don't need third party websites visit
11:12
and many third party websites take a
11:14
long long time to actually upload images
11:16
so this software will make things very
11:19
easy for you because all the
11:21
functionalities are available in one
11:23
software only and uh the price is also
11:26
good the link is given you can directly
11:28
purchase it you will get the CXC file
11:30
alongside with the full source code it
11:32
is developed inside UJS and we have used
11:35
fmpg library and uh all these packages
11:39
so now we can even convert these into
11:42
icons as well you can basically include
11:45
icon 16x 16 24x 24 32x32 so if you want
11:49
to enable this also you can also do that
11:52
if you want to just increase uh just uh
11:57
convert this into icons
12:03
you can crop this image or rotate this
12:06
image as
12:07
well you can compress the image jpg
12:11
quality PNG quality you can adjust from
12:13
here like this and also here Avis so
12:17
these are the global options that you
12:19
have right here uh if you want to make
12:22
uh transparent image you can just do
12:24
this like
12:27
this and then we have have this option
12:30
crop and rotate so if you want to crop
12:33
your image guys how we can do that we
12:35
can basically crop any section of the
12:38
image like suppose using this slider
12:41
that we have Mouse
12:43
slider so if you want to crop this
12:46
portion simply click
12:47
on
12:50
Save and you can basically select the
12:53
location where you need to save this
12:55
image so I will simply save this at this
12:59
location
13:04
so you will see the file has been
13:07
successfully saved the image is cropped
13:09
and it is successfully saved that at
13:10
location this is the cropping
13:12
functionality you can do this easily
13:15
using this freehand or you have you can
13:18
select aspect ratio as well 16x 9 4x3
13:22
3x2 and uh this is the full image croper
13:26
which is built in you can even have
13:28
gridlike structure flip this image
13:30
horizontally vertically all this stuff
13:32
you can do
13:36
perform so it's a very good
13:39
uh software guys the link is given you
13:43
can directly purchase it and then if I
13:46
show you there is also filter tools also
13:49
available if you want to apply filters
13:52
to your images you can even do that as
13:55
well so pre-made filters are there so if
13:58
you want to apply a filter here any
14:02
filter so you can see that on the left
14:04
hand side it will show you the live
14:06
preview after you apply this
14:09
filter nice filters are there you will
14:11
see that you can blur your image all the
14:15
stuff you can a list of filters are
14:21
there so all these filters are available
14:23
in Photoshop canva guys in third party
14:26
websites but it is available in this
14:28
awesome desktop app that I developed in
14:29
vuejs using fmpg and sharp Library sharp
14:33
package so sharp is basically open-
14:36
Source nodejs package for image
14:38
processing we are using these two
14:39
libraries in in conjunction to basically
14:42
build this awesome desktop application
14:46
so if you want to apply this click on
14:49
ADD so now this filter is applied you
14:51
can even apply multiple filters as
14:54
well click and add so two filters have
14:57
been applied so after you do this you
15:01
can save this image simply click save
15:04
and again you need to select the
15:06
location where you need to save
15:20
it you can see the image is successfully
15:22
saved with those filters and
15:25
uh we have uh this tool also Al
15:29
available you can also do batch
15:31
processing as well you can select
15:32
multiple images and you can apply
15:35
filters to them so you can close this
15:38
and let me show you one more uh these
15:40
are various tools out there you can join
15:43
images multiple images horizontally
15:47
vertically you can basically open
15:49
multiple images right here if you want
15:51
to join these images two images you can
15:54
join this you can need to select the
15:56
direction in horizontal direction or
15:58
vertical directions let me
16:01
select horizontal Direction click on
16:07
join just select your
16:12
images you can split or join all these
16:15
things you can
16:25
do you can select the format as well
16:28
webp form
16:33
format this is the join and you can have
16:37
also animated things as well guys if you
16:40
want to create a gif animations from
16:43
multiple images so let's
16:45
suppose uh you need to here select your
16:50
images so let me select multiple images
16:56
here each image will take I think you
16:59
can see we have seven images selected
17:02
each image you can say each image takes
17:05
uh uh 1 second you can just change the
17:08
duration you can even provide your
17:10
custom duration for each image to appear
17:12
in the GIF animation so I will just
17:14
change this to 1 second for every frame
17:17
so in with the help of this you can just
17:19
also create GIF animations right here
17:22
with this desktop application you don't
17:23
need to go anywhere so you can see all
17:26
these things you can perform right here
17:28
and then after doing this you can play
17:30
your GIF animation each image will
17:32
appear for one second in the GIF
17:34
animation and then you can now export
17:36
this to a web P image or you can export
17:39
this into GIF so simply click GIF and uh
17:43
just
17:44
uh save
17:46
it so it is paring the frames and after
17:50
that encoding it so now save is
17:52
successful so it has created a gif
17:55
animation if you try to open each image
17:58
will appear here for one second and your
18:00
GI file is ready so it has been made
18:02
from multiple images so right here from
18:05
this desktop app you can even uh export
18:08
this into a webp format as well webp
18:12
format actually runs in the browser it
18:14
doesn't run in the so it's you can even
18:17
export that into a webp format as well
18:20
so now it run RS in the browser so you
18:23
can see that so if you're liking the
18:25
content guys please hit that like button
18:26
subscribe the channel as well this is
18:29
the actual app that I'm showing
18:32
you if you are interested the link is
18:35
given in the
18:37
description and lastly I will show you
18:40
PDF tool also
18:46
there if you want to extract images from
18:50
PDF there is this uh icon tool also
18:53
available you can basically convert your
18:56
images to icons if you
19:00
select then we have the PDF tool also
19:04
available you need
19:06
to select your Source images let me
19:10
select all these four images to be
19:12
inserted in the PDF document so I can
19:14
simply click export and then I can
19:17
export this into a PDF file so now if I
19:21
open this will be the PDF file which
19:25
will contain all these four Images so
19:26
the PDF file has being created
19:29
successfully and we can even extract
19:31
images from a PDF document you can just
19:34
need to upload your PDF document just
19:38
select let me select this click on
19:41
extract you need to provide the output
19:44
directory so right inside select folder
19:48
click on extract so your images will be
19:51
extracted let me show you this will be
19:53
the folder created and all the three
19:55
images will be successfully extracted
19:57
and showed you this is a PDF tool as as
20:00
well PDF editor right here in this
20:03
built-in inside this editor so if you
20:06
are interested guys I've showed you
20:08
almost all the functionalities but still
20:10
I think it's a complex tool some of the
20:12
functionalities I failed to show you but
20:14
you can try out on your own so it's a
20:16
pretty good canva clone and Photoshop
20:19
clone that I showed you that I built
20:22
inside VJs if you are interested the
20:24
link is given you will actually get full
20:26
source code and a set set up file that
20:29
you can
20:30
run and
20:32
uh this is actual source code and if I
20:35
show you the package.json file we are
20:38
using sharp Library if you see which is
20:41
a package in nodejs for image processing
20:44
we are also using FF MPG as well for
20:47
this so if you're interested guys thank
20:49
you very much for watching this video
20:51
the link is given for purchase so I will
20:54
be seeing you in the next video
#Flash-Based Entertainment
#Multimedia Software
#Clip Art & Animated GIFs
#Video Sharing