Up next in 10
Build a FFMPEG WASM Photoshop & Canva Image & Video Editor Clone in Browser Using HTML5 & Javascript
Dec 13, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-ffmpeg-wasm-photoshop-canva-image-video-editor-clone-in-browser-using-html5-javascript/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I just want to show you a
0:04
brand new uh Photoshop Canva clone video
0:08
and image editor clone that I developed
0:10
in browser using HTML and JavaScript,
0:12
plain HTML and JavaScript when we have
0:14
used FMPG web assembly library in the
0:16
browser to build this awesome ultimate
0:19
advanced uh image and video editor
0:22
software in the browser which works uh
0:24
right in the browser. No serverside code
0:26
is involved. If you upload your files,
0:28
it is 100% secure. It works in the
0:31
browser itself. You will see all these
0:33
functionalities are there. You will be
0:34
able to convert from one format to
0:36
another. All the formats are supported.
0:38
And you will be able to control the size
0:41
of the image, compress the size. You can
0:43
add watermark, trim the crop the image,
0:46
you can even transform the image, resize
0:50
the image, rotate the image, add the
0:52
image watermark, text watermark. This is
0:55
the actual application guys. So first of
0:56
all let me show you the demo right here.
0:58
So first of all as you will select your
1:00
image file guys. So as you select the
1:02
image it will basically download it. So
1:05
first of all uh in the download
1:09
directory right here if you have auto
1:11
download on then automatically your file
1:13
will be downloaded. You can basically
1:15
this is the download mode. You can put
1:17
zipped file. It will basically download
1:20
the output images in a zip file or one
1:22
by one. If you don't want to autod
1:24
download, you can simply turn off this
1:26
option. And these are various settings
1:28
out there. If you want to toggle off all
1:30
these settings, let me show you one by
1:32
one. By default, when you launch the
1:34
application, it works in the browser. If
1:35
you see it is working in the browser. No
1:38
serverside code is involved. You can
1:39
directly upload this application to a
1:42
ordinary hosting and you can basically
1:44
earn a lot of money by placing
1:45
advertisements as well. So the link is
1:48
given guys. You can directly purchase
1:49
the full source code of this
1:50
application. You will get the zip file
1:52
after you purchase it from Google Drive.
1:54
You just need to extract the content
1:56
which will contain the HTML, CSS and
1:58
JavaScript code. So let me show you the
1:59
demo of the application. So by default
2:01
this will be selected. And now you just
2:04
need to select which format you want a
2:06
image to convert. Let's suppose I want
2:08
all my images to convert to webp format.
2:10
I will simply select this. And now I if
2:12
I select my image
2:15
like this. If I select this and
2:18
basically in the download I will simply
2:23
turn on this option. So the as I select
2:26
the image it will automatically download
2:29
after the processing is done. So now uh
2:32
as I select my image let's suppose I
2:34
want to convert this image to webp
2:37
format. So it will work and
2:38
automatically your image will be
2:41
converted to webp format. You will see
2:42
that. So in this way, so the next thing
2:46
is so next thing guys is that you will
2:50
basically see here
2:53
uh we can basically convert to any other
2:56
format. JPG as well. All these formats
2:58
are available. GIF file, static GIF
3:00
file, PNG, WEBP animation, GIF
3:03
animation. You can even convert this to
3:05
icon as well. Various sizes 128x 128,
3:08
256 x 256. So if you're developing an
3:11
application, if you need a icon, you can
3:13
simply it will simply convert this into
3:16
a icon file. Whatever image file that
3:19
you select and now it has been converted
3:21
to a 256x 256 icon. So
3:26
you can even select you can see that
3:28
this file has been reduced from 301
3:31
kilobyte to 45 kilobyte. So image
3:33
compression is also going on guys. It's
3:35
a very tremendous application. It also
3:38
does you it also compresses your images
3:41
as well alongside with converting and uh
3:44
it is very good application and uh
3:48
you can basically do it
3:52
take your image it will basically show
3:54
you a progress bar after it is done it
3:57
will simply download your file
3:59
automatically once it is done it will
4:01
simply download you will see that so now
4:03
I will show you uh some other dependent
4:06
uh site size as well. You can even
4:08
control the size as well. You can
4:09
mention manually as well if you want to
4:11
mention
4:13
or you can select pre-made sizes 500
4:16
width, 500 height. You can even provide
4:20
scaling as well. And uh if you want to
4:24
resize your image to 500x 500, so it
4:27
will resize your image to 500 by 500. So
4:31
now this image is exactly 500 in width
4:34
and 500 in height. So next thing you can
4:37
even control the quality by using the
4:39
slider if you want to decrease the
4:41
quality of the image. If you want to
4:43
save some size
4:46
uh
4:50
so you will see this image quality will
4:54
be slightly degraded. You will see that
4:56
we have successfully degraded the size
4:59
from 201 kilobyte to 12.5 kilob. You can
5:03
control all these options guys like
5:05
this. You can even have a fixed size as
5:07
well. Let's suppose you want a fixed
5:09
file 100 kilobyte as only you can toggle
5:12
this option. So all these advanced it's
5:14
a advanc image editor guys. Similar to
5:18
Canva that you see and Photoshop all
5:21
these functionalities are available
5:23
right in the browser. It says single
5:25
page application. It works in the
5:27
browser. No serverside code is involved.
5:29
And uh now let me show you the third one
5:32
which is transform.
5:34
So if you want to rotate your image by
5:36
any angle. Let's suppose if I want to
5:38
rotate my image to 90°. So now if I
5:41
select my image this image it will
5:45
basically rotate my image. And now you
5:48
can see it will see it it is rotated my
5:51
image by 90°. If you want to
5:54
horizontally flip your image as well,
5:56
you can also do that as well.
6:02
So it will horizontally flip your image.
6:05
You will now see the image is
6:06
horizontally flipped. So you can see
6:09
that. So all these options are there.
6:12
And uh rotation flipping. Next option is
6:16
for adding watermark. So let's suppose
6:17
if you want to add watermark guys, it is
6:19
very easy adding text watermark. This is
6:23
a window will open right here. If you
6:24
see that basically
6:27
if I want to add my own channel name
6:29
coding. So automatically it will show
6:31
you in the left hand side it will show
6:34
you you can control everything right
6:36
here. Phone size as well. If you want to
6:39
repeat this you can select the repeat
6:41
option. Open repeat. And now you will
6:43
see that you can even control that like
6:45
this. You can see that you can control
6:48
everything right here. This looks great.
6:52
So you have seen images using
6:54
watermarked something like this. You can
6:57
control this left position all that
6:59
stuff
7:08
you can see that so now I can simply
7:10
save. So now watermark is saved right
7:13
here. So once I basically apply this to
7:16
let's suppose uh
7:21
now if I select my image.
7:29
So if I open this image now you will see
7:32
that guys all these watermarks will be
7:34
added right here. Coding coding seure
7:36
that you see right here. Let me just
7:39
delete this one that I see right here.
7:44
So two watermarks are there. So I only
7:46
need one watermark. So I will simply
7:48
delete the first one. So you will now
7:52
see all these watermarks will be added
7:54
right here. If you see that we added
7:56
this watermark. You can control the
7:58
orientation everything by I showed you.
8:01
Basically
8:02
if you want to add also the image
8:04
watermark same goes with it as well. You
8:07
can control all these functionalities.
8:09
Repeat. You just need to choose a
8:11
watermark image that will be used.
8:15
So once you will basically see
8:24
so image is larger. So I need to select
8:27
a small image for this. So what I will
8:30
say uh YouTube logo
8:44
256 256 Six.
9:00
So this logo I will take guys for adding
9:03
watermark.
9:06
So simply click add, choose your uh
9:11
simply file here. So now go to repeat
9:14
and basically you can basically place
9:16
anywhere it will place it and all the
9:18
locations if you want the in the center
9:20
position left hand side all that stuff
9:24
if you want here all that you can even
9:27
scale it if you want to decrease the
9:29
size everything you can control guys
9:31
with this editor. It's a tremendous
9:33
editor. If you have this editor, you can
9:36
do all the things. You can even if after
9:39
purchasing this, you will get full
9:41
commercial rights of uh reselling or
9:44
using this as uh putting advertisements
9:46
and earning money. So the link is given.
9:49
You can directly purchase it from my
9:51
website. You will get a zip file which
9:53
will get which will contain all the
9:55
source code and the actual application.
9:57
You can see the application tremendous
10:01
success. You will see that.
10:06
You can see that. So how it
10:11
looks great. We don't need the repeat
10:14
one. So
10:18
you can toggle this off. So I just want
10:21
this uh watermark to appear in the
10:25
So I can simply
10:28
in the center. Sorry. It's in the
10:29
center. That's all. Click on save. So
10:32
now if you upload your image now any
10:34
image that you upload you can even do
10:37
this for multiple images guys. So just
10:39
select multiple images not one single.
10:41
So now guys I will I I'm just talking
10:43
that if you want to toggle this download
10:45
option. If you want to have multiple
10:47
images downloaded you can basically
10:50
select multiple images right here. So if
10:52
I basically now want to select multiple
10:54
images I can select here this multiple
10:57
images. So I've selected all these
11:00
images. So it will show the progress
11:02
bar. It will now download a zip file.
11:04
And now it will open a zip file and all
11:07
these screenshots will be
11:10
uh a watermark will be added. So you
11:12
will see that all the images have
11:13
watermark right at the center position.
11:15
So you can see bulk watermark you can do
11:17
with this application. Awesome image
11:19
editor that I developed for you guys in
11:22
HTML, CSS and JavaScript. The link is
11:24
given in the description and also in the
11:26
next section I will show you it also
11:28
contain a video recorder built in.
11:30
Inside this video editor Canva and
11:34
Photoshop editor it is also having a
11:37
video editor built in which allows you
11:39
to record your videos directly in the
11:41
browser and saving at web m file. You
11:44
will see in the next section and this is
11:46
for the watermark guys. I showed you all
11:48
these things. You will see that. Now we
11:52
come to the trim option. If you want to
11:53
trim the uh trim the crop the portion,
11:56
you can even do that as well.
11:59
You can select the top portion, left
12:02
portion. This is for trimming or
12:04
cropping the video. You can do that. You
12:06
can rename your file as well. Original
12:08
name, number as well. So these are all
12:10
the settings. And now let me show you a
12:14
very fun little setting guys. If you
12:17
want to have a simple sound, you can
12:20
basically go to it. You can even control
12:21
the number of CPUs that it will be used
12:24
using. I have maximum CPUs available
12:27
which is CPU cores which is eight. It is
12:30
automatically selected. You can al also
12:32
control that also. If you want a sound
12:34
notification then you can simply toggle
12:36
this option on. So now you will get a
12:39
sound notification when your processing
12:41
is done.
12:44
>> Job's done.
12:45
>> You can see that job done. A person has
12:48
spoken these words. So that you get a
12:50
notification that your job is done. So
12:52
you can now open your result. Awesome
12:54
application guys. So the link is given
12:56
guys. You can directly purchase it. You
12:58
will get a simple
13:01
uh you will get HTML code
13:06
like this. This will be the HTML sorry
13:09
this will be the code that you will get.
13:11
This will be the directory structure you
13:12
will get. Guys if you are interested the
13:15
link is given. So you can directly go to
13:19
the description and purchase this
13:21
awesome little source code. So thank you
13:23
guys for watching this and uh in the
13:26
next section in this video I will now in
13:28
the next section I will show you that
13:30
video recorder as well. So uh and as a
13:33
as a bonus software guys I also develop
13:35
a video editor guys for you where you
13:37
can even record your screen as well.
13:39
Simply click this option or you can even
13:41
drag and drop your uh existing video as
13:43
well. Take screenshots and save it as a
13:45
PNG or WEBP format. If you want to
13:48
record your screen, simply select entire
13:50
screen, let me select. Click on share.
13:53
If you want to also include audio,
13:54
system audio. So, whatever that I'm
13:57
speaking right here, system audio, you
13:58
can even include the system audio as
14:00
well. So, toggle this option. Click on
14:02
share. So now it will start recording
14:06
whatever I'm uh
14:09
so you will basically see it will start
14:11
recording. If I click finish my video
14:13
will be generated if you see in the
14:15
video player and uh I can simply
14:20
this is uh
14:27
you can basically will see that. So it's
14:29
a very awesome little application guys.
14:31
You see that video recorder is also
14:33
there
14:35
and uh
14:40
you can basically take the screenshot as
14:43
well in the video.
14:52
So if you're interested guys the link is
14:54
given in the description
14:56
you can directly purchase it. This is
14:59
the actual software. Very good software.
15:02
Photoshop Canva clone software. Thank
15:04
you very much for watching this video.