live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a React.js FFMPEG Canva GIF Image & Video Editor Clone Using Fabric.js & Gifshot in Javascript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-canva-gif-image-video-editor-clone-using-fabric-js-gifshot-in-javascript/
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 guys welcome to this video so
0:02
in this video I will show you basically
0:04
a canva clone GIF editor that I
0:07
developed inside react chers this is the
0:10
application that we will be building in
0:12
this tutorial I will show you this is
0:14
actual project that I built right here
0:17
and this allows you to actually edit
0:20
your in your GIF files similar to canva
0:23
canva is actually a very popular editor
0:27
website and we basically make a clone of
0:29
it which have most of the features it is
0:32
you can edit the speed of the GIF
0:34
animation so here you need to first of
0:36
all select your GIF animation and let me
0:40
select this GIF animation which is 6
0:43
megabytes as I select this basically the
0:46
file is selected and you just need to
0:49
wait depending upon the size of the GIF
0:51
animation so when the GIF animation will
0:54
successfully load it will show you on
0:56
the left left hand side you will see now
0:58
the GIF animation is playing right here
1:01
so this uh application encapsulates you
1:04
will see you will the user will see the
1:07
live preview of the GIF animation as you
1:09
are editing it now you can actually
1:12
change the speed of the GIF animation if
1:14
you decrease it using the slider the
1:17
speed will decrease and now you can see
1:19
automatically it updates and it just
1:22
shows shows you the animation speed
1:25
right here you can control it by the
1:27
slider if you increase the value of the
1:29
slider
1:30
then the speed of the GIF animation will
1:32
increase as you can see that the the
1:34
speed is increasing so you can just in
1:37
real time you can control the speed
1:38
right here in this you very awesome
1:41
application that I developed and this I
1:43
used fabricjs and uh I used a open-
1:47
source Library gift shot I will show you
1:50
all the dependencies that I used for
1:51
this project so you can see you can
1:53
control this the speed of the GIF
1:55
animation using this fider and it will
1:57
automatically update on the left hand
2:00
side where the GIF animation will say
2:03
and also you can play it in reverse
2:05
order as well by selecting this by
2:08
playback effect so now the GIF animation
2:10
will play in the reverse order so you
2:13
can customize all these things guys you
2:15
can increase the speed you can reverse
2:17
the GIF animation and then you if you
2:19
want to compress the size of the GIF
2:21
animation then you can select the
2:22
quality of the GIF animation 240 360p
2:26
720 or original image size so you can
2:29
also compress the size as well so let's
2:31
suppose I want to compress the size so I
2:33
will select 240 and then you can select
2:36
the image quality standard quality
2:39
compression high quality high definition
2:43
original picture so if I select
2:45
compression here it will compress the
2:47
size and uh let me select this to this
2:53
one and there is a button out there
2:55
which lets you export this GIF animation
2:58
since I click this so it will basically
3:01
export the frames and it will show you
3:04
this progress bar once it is completed
3:06
it will now export this you can simply
3:09
download this and it will download this
3:11
as a particular location so we can save
3:14
this so you can see it has been reduced
3:16
to 3.5
3:18
mbes the original size were 8 megabytes
3:21
so you can play this now you can see the
3:25
GIF animation is slightly compressed and
3:28
the size has been reduced and it is
3:30
playing in the reverse Direction so in
3:32
this way guys you can edit your GI files
3:35
very easily and we have various effects
3:39
you can write text as well on the GIF
3:41
animation so there is a second option
3:44
right here GIF filter there are various
3:46
filters that you can apply
3:48
here this is the actual original picture
3:51
GI animation so if I want to change it
3:53
to black and white we can change to
3:55
black and white GIF animation you will
3:56
see in real time the picture has been
4:00
changed to black and white this gift
4:03
video similarly High contracts all these
4:06
filters are pre-built by me and you can
4:09
see that if you want the brightness
4:11
dark reverse color you will see that so
4:15
all these filters are pre-built inside
4:18
this editor so if you need this uh
4:20
application guys uh full editor the link
4:23
is given you can directly purchase the
4:25
full source code and uh this is entirely
4:28
built in react CH so we are you can see
4:30
after you purchase it you will uh get a
4:33
zip file from Google Drive you can
4:35
actually extract the content of the zip
4:37
file you will get this directory
4:38
structure which will actually contain
4:40
all the source code for this project and
4:42
uh now you can see that we are running
4:46
this project on Local Host 8,000 so we
4:49
are running
4:50
locally and all these filters are
4:53
available here you can see that blur
4:55
filter this is a noise filter threshold
4:58
filter nostalgia filter inverse filter
5:02
so this makes it very much easy if you
5:05
have seen these uh GIF animations on the
5:07
internet having various filters applied
5:10
to it so then we have got the next
5:14
section called as text animation so now
5:16
if you add to want to add some text on
5:18
the GIF animation let's suppose right
5:21
here I will simply write
5:26
cat coding so we can just add add this
5:31
and we can even add some animation to
5:33
this text you can see that this is a
5:35
zoom animation or we can add a Flash
5:38
animation like this or a Jitter
5:41
animation like this so these animations
5:45
you will not see on canva guys canva
5:47
website but I buil this using scratch
5:50
using fabricjs and all those awesome
5:53
animation libraries you can see the
5:55
gradients as well so whichever animation
5:57
that you like
6:00
if you want to export that so it will
6:03
export this animation depending upon how
6:06
much filters that you have applied you
6:07
just need to wait for the animation to
6:10
complete and now you can simply download
6:12
your GI file with the modified changes
6:15
and now if you open this now your gif
6:18
file it will now have this uh awesome
6:22
little filter apply to it it has been
6:24
changed to black and white and also the
6:26
text is appearing with uh is flashing
6:29
anation so it looks really good guys if
6:32
you want to share these GIF animations
6:33
on social media it will viral it will go
6:36
viral as well it will get a lot of views
6:38
as well so it's a you can get this
6:41
editor the link is given you can
6:43
directly purchase the full source code
6:45
and you can even deploy this editor
6:47
inside your own website after purchase
6:50
you will get full commercial rights you
6:51
can use this editor and uh you can put
6:55
advertisements and earn Revenue using
6:58
Google AdSense as well you can just
7:00
place an advertisement just before the
7:02
editor after the editor and you have
7:04
seen websites like this on the internet
7:07
very few so I just developed this editor
7:09
for you if you are interested you can do
7:11
that you can even delete that as well by
7:13
clicking the delete option you can add
7:15
multiple text as well if you want to add
7:18
another text right here you can change
7:19
the color by using Color Picker you can
7:22
see that the color will change right
7:25
here you can change the
7:28
color so as you
7:31
select the color will change right here
7:34
you will see that
7:38
so so you can add multiple text so this
7:42
will have this animation Jitter
7:44
animation this has this flashing
7:45
animation so you can even change fonts
7:48
as well guys various languages are
7:50
supported you can see
7:55
that sansor if you can even upload your
7:58
own custom phone guys let's suppose you
8:01
are want to use a custom font you can
8:04
just go to Google fonts and you just
8:06
need to upload your ttf file so
8:09
whichever phone that you want you can
8:11
download that phone ttf file
8:16
so so if you want to use this phone you
8:20
need to uh download a ttf
8:26
file so just
8:28
extract
8:34
this ttf file you will see it will be
8:37
there so now inside this uh editor you
8:40
can simply upload your ttf
8:45
file just select that loading successful
8:48
so now you can see it has been added
8:51
your custom font has been added guyses
8:53
you will see that so you can use any
8:54
custom font of your language go to
8:56
Google phones and if you're living in
8:58
any country
9:00
you need to use your own native phone
9:01
you can even use that notive phone
9:03
there's an option right here to actually
9:06
upload your local phone so it will get
9:07
added you can see that so it is very
9:10
easy guys you can place it anywhere else
9:12
you can just place it you can increase
9:15
the size decrease the size if you just
9:17
want to add a watermark image there is
9:20
an also an option if you want to
9:21
copyright your gift animation there is a
9:23
second action sticker you can add some
9:26
stickers pre-build stickers are also
9:27
available you can add these stickers
9:30
so these are pre-built and inside the
9:33
application there is an directory called
9:35
a static you can basically upload some
9:38
more custom stickers of your ORS you can
9:41
just delete add custom
9:43
stickers just select it and delete this
9:46
or you can upload your own images that
9:49
you want to
9:50
do if you want to add your own images
9:53
you can even add this overlay like
9:57
this just a simple water mark you can
9:59
add this and uh now just need to export
10:03
that so you will see it will now export
10:05
your GIF animation so buy this awesome
10:08
little progress bar so it's a nice
10:11
little application guys and now you can
10:13
save your gift animation anywhere on
10:16
your so you will see the image will also
10:19
appear as a watermark and this is actual
10:23
various you can just customize that I'm
10:26
not good at designing
10:28
so it uh you can anyway you can design
10:32
your gift animations and then you can
10:35
actually export them and uh you can
10:39
compress this as well I showed you you
10:41
can increase the speed of the GIF
10:43
animation as well decrease the GIF
10:45
animation speed like
10:51
this playbacks normal if you want to
10:55
have original size the original picture
10:58
as well so it will will not be
10:59
compressed now if you export that the
11:02
GIF animation will remain the SP same it
11:05
will not be compressed it will be
11:07
staying at its original picture that's
11:09
why it is taking a lot of time you can
11:11
see that uh earlier on it was compressed
11:15
so it was taking less time so depending
11:17
upon your GIF animation size it will
11:19
take time you just need to wait after
11:22
100% it will export your GIF animation
11:24
so that you can download your GIF
11:25
animation outside your directory so
11:30
this is actual editor guys canva clone
11:32
kind of an editor especially for gift
11:34
files if you are interested the link is
11:36
given in the description of the video
11:37
you can directly purchase it after
11:39
purchasing it you will get a zip file
11:40
you just need to extract the uh files
11:44
and then simply run the command npm Run
11:47
start it will start this at a locally
11:49
inside your development server this
11:51
application and you can run it inside
11:53
the browser and the main benefit of
11:55
running this application guys it's
11:57
entirely coded in JavaScript react CH
11:59
and it is totally client s side so no
12:02
server no server s side code is involved
12:05
so entire code is in JavaScript so so
12:09
the entire application works in the
12:11
browser you don't need any third party
12:14
Library you don't need any third party
12:15
software it works in entirely in the
12:18
browser so it it works very efficiently
12:22
so you can see we are running it on
12:24
Local Host 8,000 and no server is
12:26
running it is entirely working in the
12:31
uh browser so now I let me show you the
12:33
code guys what you will get after you do
12:36
this so let me show you actual
12:38
dependencies that we are using for this
12:40
so as you can see we are using
12:44
react
12:46
framework and then we are also using
12:48
fabricjs which is a
12:51
anime canvas Library which allows you to
12:55
export your canvas
12:57
to video
12:59
this is a very good Library fabric JS
13:02
open source JavaScript library and then
13:03
we are using gift shot and lip GIF these
13:06
are two open source libraries if you
13:08
just search for first of all fabricjs
13:11
it's a canvas library for JavaScript and
13:17
uh so it's a open source
13:20
Library so this library is free and uh
13:24
it's open source and many open source
13:27
animation related projects are made
13:29
based upon this Library so I used this
13:31
library and the second one I used which
13:33
is uh lib
13:36
GIF which is a it's again a library for
13:41
passing the GIF and image data so it has
13:45
a it's a nodejs module which is
13:48
1,53 weekly downloads so we use this and
13:52
also we use this package which is gift
13:55
shot it's a you can search the SE all
13:59
these packages right
14:01
here so it's a JavaScript library that
14:04
can create animated gifts from video
14:06
streams such as webcam so we are using
14:09
this package which is
14:12
2,441 weekly download so it's a good
14:15
library and it allows you to create your
14:17
GIF animations from videos so we are
14:20
actually using this library inside our
14:22
project to actually uh show the GIF
14:26
animation live preview as you basically
14:28
make the changes we are actually
14:30
updating the GIF animation based upon
14:33
the changes that you make inside the
14:36
editor so all these libraries are interl
14:39
to actually create this awesome project
14:41
that you see in the browser
14:45
and and for the UI we are actually using
14:48
this uh ant which is a UI framework for
14:51
react shairs for actually building this
14:53
application so this is all guys for the
14:56
dependency section and uh coming to the
14:59
source code we have different components
15:01
first we have canvas this is the
15:03
editor uh main editor component we have
15:08
this it is coded in typescript not uh
15:12
it's a super super set of JavaScript
15:15
with additional features such as
15:17
compilation type checking so typescript
15:21
is similar to JavaScript but it's super
15:23
set so we have various components out
15:26
there guys and if you have some
15:28
knowledge of chairs you can even modify
15:30
this application according to your own
15:32
needs but I just coded this entire
15:34
application you don't need to modify
15:35
anything you just need to learn how I
15:38
made this so it's very good application
15:43
you will you can do this thing if you
15:47
are interested the link is given you can
15:50
see all the components have this uh we
15:52
are
15:55
using so and you will see that is we are
15:59
using this fabric Library fabric
16:05
JS
16:07
so these are different effects that we
16:10
are using which is zoom zoom effect
16:12
which is it will scale it this is the
16:15
animate effect that we are using this is
16:16
flashing animation Jitter animation
16:19
gradient animation so we have defined
16:21
all these animations in the array
16:24
structure these are different effects
16:26
that we have inside the GIF editor and
16:29
these are different fonts that we are
16:31
using using which is italic bold and uh
16:36
normal these are pre-made default fonts
16:39
we have declared this all these arrays
16:41
with the default
16:43
options this is text related so various
16:47
sections if you see in the application
16:49
we have four section for the attributes
16:52
filter animation text animation and
16:55
sticker water we four sections out there
16:57
for these four sections we have four
17:00
different files here which is first
17:03
one second one third one fourth so four
17:07
components are there in this editor tab
17:09
pan so this editor is made up of four
17:12
components each having its own
17:14
typescript file and you can see this is
17:18
actual code so we have defined all
17:20
qualities right here compression
17:22
standard quality high def high
17:24
definition original picture and these
17:26
are different reverse normal
17:30
so if you have some knowledge on react
17:32
CH you will be able to uh see the code
17:39
working this is the actual
17:46
canvas you can see that so
17:52
here we are resolving the GIF here
17:55
showing the live
17:57
preview these are different functions
18:00
out there you can see that we are also
18:03
using for managing the state we are also
18:06
using Redux because you can see the
18:07
dispatch function so for managing the
18:10
data and the state inside react chairs
18:12
we are using Redux for
18:15
actually uh managing the state of the
18:18
application
18:21
so this is the actual application guys
18:24
if you are interested the link is given
18:26
I showed you all the dependencies that
18:28
we are using for this project you will
18:29
get a zip file you just need to extract
18:32
the zip file and just run npm run start
18:36
you just need to say npm Run start it
18:38
will run your development server it will
18:40
compile the application it will run this
18:42
application on Local Host 8,000 and you
18:45
just need to open it inside the browser
18:47
and it will work if you still face any
18:50
problem you can contact me at my email
18:52
address and I will therefore help you so
18:55
please hit that like button subscribe
18:57
the channel and I I will be seeing you
18:59
guys in the next video
#Movies
#Online Media
#Multimedia Software
#Online Goodies
#Clip Art & Animated GIFs
#Animated Films
#Other