Up next in 10
Build a Canva Clone Bulk Image Watermark Editor to Add Text Watermark on Multiple Images in Browser
Dec 13, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-canva-clone-bulk-image-watermark-editor-to-add-text-watermark-on-multiple-images-in-browser/
Show More Show Less View Video Transcript
0:00
stream of coding section. So in this
0:02
slideream I will actually introduce to a
0:05
new tool that I developed on our website
0:07
freemediatools.com
0:09
uh which is a bulk uh image watermark
0:12
editor where you can actually
0:16
something like Canva. Canva also has a
0:18
watermark editor. So I just developed
0:21
that editor right in the HTML CSS and
0:25
vanilla JavaScript. We haven't used any
0:27
third party dependency. If you go to my
0:29
website freemediatools.com/advanced
0:32
image watermark editor you can see the
0:34
live demo. So if you just see here you
0:39
will have this interface either you can
0:41
drag and drop your multiple images or
0:43
you can select it. So you can select
0:45
PNG, JPG, WEBP, GIF all extensions are
0:48
supported. So once you select all your
0:50
files, all your image files and now you
0:53
can see live preview will also be there.
0:56
This is the first image, second image,
0:58
third image, fourth image. All the four
1:00
images you can see you can have this
1:02
nice little editor on the right hand
1:04
side. Here you can put your company name
1:06
or logo name. So as you can just see
1:08
with live preview as you are doing this
1:11
coding sa automatically the logo is
1:14
updating. So as I'm just deleting it
1:17
everything is in live sync
1:19
synchronization. And here you can select
1:21
some fonts out there.
1:24
Whichever phone that you like, cursor
1:26
font is great. And then you can select
1:28
the positioning of the logo in the top
1:30
left position, top center or top right
1:34
position. Here you can even adjust the
1:36
size of the logo as well.
1:39
So if you want to adjust the size, it
1:42
can be also be adjusted.
1:48
And also you can adjust the color as
1:50
well by using this color picker.
1:56
So you can see that the size here
1:59
you need to adjust the size accordingly.
2:02
So now if you want to place it in the
2:04
center position it will look something
2:06
like this. And right you can adjust this
2:10
size of the logo right here. So coding
2:13
six is placed at the center. You can see
2:16
that we can even rotate as well. You can
2:19
put a rotation angle 45. You can see now
2:22
the
2:24
watermark is rotated. You can see that
2:27
each and every image is automatically
2:30
inheriting these tiles as you are making
2:32
one change right here. And you can see
2:34
all the images are getting watermarked
2:36
right here. You can adjust the text
2:39
color. If you need the blue color, you
2:42
can adjust it. You will see that now all
2:44
the watermarks are blue. You can even
2:47
control the opacity as well from here.
2:50
First is the one you can say nine. So
2:53
the opacity will look something like
2:55
this. You can also click the plus icon
2:58
here also to actually add more images.
3:00
If you add more images you can do as
3:02
well. This is the overall application.
3:06
Now once you are done you can simply
3:07
click the download zip. So what it will
3:10
do it will actually create a zip file
3:12
where it will actually contain the
3:14
watermark images. So all these images if
3:17
you see are being watermarked and all
3:20
images have the same watermark that is
3:23
you are added.
3:25
So in this way this is actually a Canva
3:27
clone image watermark editor that I
3:30
developed entirely in HTML, CSS and
3:32
JavaScript. The link is given in the
3:34
description. You can go to my pcommerce
3:37
website crowcodestore.com and directly
3:39
purchase that full source code. This
3:41
actually contains a single index.html
3:43
which contains CSS, JavaScript and HTML
3:47
code as well. So we haven't used any
3:49
third party dependency. We have just
3:51
used the concept of HTML canvas to
3:53
actually build this application from
3:56
scratch. This is overall code right
3:58
here. If you see
4:00
almost 609 lines of code that I written
4:03
from scratch guys with my full hard work
4:06
and dedication. So if you get this code
4:08
guys you will be able to modify it or
4:11
you can even extend this as well to add
4:13
more additional features. You will get
4:16
to understand how to develop realtime
4:18
applications real life applications
4:20
using HTML CSS and JavaScript without
4:23
having using a third party dependencies.
4:25
We have used the DOM here document
4:28
object model to actually code this.
4:32
So if you're applying for a job or if
4:33
you are a student so it's a realtime
4:36
project. It will be a really good
4:38
project to understand how to build a
4:40
real life application in HTML,
4:43
JavaScript and CSS. And at the checkout
4:46
page you can even try this application.
4:48
I have given the link before you
4:50
purchase it. You can actually try this
4:53
on yourself. If you are comfortable, if
4:55
you like this application, then you can
4:57
purchase it. You can see you can adjust
5:00
all these adjustment you can do.
5:04
So bottom left, all these positions are
5:06
supported. Bottom right, bottom left,
5:08
top left, top right. So all these
5:12
positions are supported. So once you are
5:15
actually done with the positioning, you
5:17
can increase the size as well by using
5:19
this slider. You can adjust the coloring
5:22
here. Any color you can pick from the
5:24
color picker. And now you can see that.
5:26
And here you can control the opacity or
5:30
you can also change the color as well.
5:45
So in this way guys you can uh adjust
5:48
the font. You can even add more phones.
5:50
If you get the source code, it is very
5:52
easy to extend this source code. You
5:54
will see it is entirely coded inside
5:55
HTML, CSS and JavaScript. If you want to
5:58
add some more additional features, then
6:00
it will be very easy for you. I just
6:02
coded this application in such a way
6:04
that you will be it will be very easy to
6:06
understand and you can just see.
6:11
So once you are done basically having
6:15
you can rotate that as well 180°. So you
6:18
can see that. So you can rotate this as
6:20
well. 45° is best for watermark or logo.
6:28
You can put any location but center
6:30
looks good because majority of the
6:33
watermarks comes in the center position.
6:36
And here you can control whichever color
6:39
that you want.
6:42
After you are done, you can click the
6:45
download zip and it will actually create
6:48
all the image files which will have this
6:51
logo right here.
6:55
So it's a great editor guys. One the
6:58
beauty of this editor is that it allows
7:00
you to select multiple images one time.
7:04
So if you have a thousands of images
7:06
that you want to add watermark or logo,
7:08
this entirely works in the browser. No
7:11
serverside code is involved. It entirely
7:14
works in client side JavaScript. So it
7:16
really becomes very easy to actually add
7:18
watermarks without using any third party
7:22
video editor or such. It's entirely
7:25
works in the browser. And the main thing
7:28
is that we actually use very little code
7:31
to actually develop this application.
7:34
And uh it's very nice.
7:38
You can just see right here the
7:40
application interface also is very user
7:42
friendly.
7:44
So
7:46
no confusion in order to basically use
7:49
this. It's very easy to implement. You
7:52
can see that very nice watermark is
7:54
added to all the images.
7:57
So the link is guys in the given in the
8:00
description of this live stream. You can
8:01
go to my e-commerce website and purchase
8:05
it. you will be redirected to Google
8:06
Drive where you will actually get the
8:08
zip file. If you still face any problem,
8:10
you can contact me at my email and phone
8:12
number and you can first of all try this
8:15
app by going to my website which I've
8:18
given in the check out page the live
8:20
demo link before you purchase it. So,
8:22
thank you very much for watching this
8:24
video and I will be seeing you guys in
8:26
the next one.