Up next in 10
Build a Canva Bulk Image Watermark Editor in Browser Using HTML CSS & Javascript
Apr 1, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-canva-bulk-image-watermark-editor-in-browser-using-html-css-javascript/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
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 uh welcome to this video
0:02
so in this video i will show you
0:05
a watermark canva editor that i built
0:08
inside browser using html css and
0:11
javascript and i have just deployed this
0:14
on my website free mediatools.com and uh
0:17
you can visit this tool right here to
0:20
check out the live demo so this tool
0:22
looks something like this where you can
0:24
actually select multiple images at one
0:27
time to add watermark and also edit all
0:30
these images so i will let me select all
0:32
these
0:34
six six files here six images and uh
0:39
then we can actually upload a watermark
0:42
that needs to be added so you can
0:45
actually pick a
0:49
watermark and then as soon as you select
0:52
this button here it will one by one it
0:55
will add the watermark so here you can
0:57
control the
0:59
actual scaling of this watermark using
1:02
the
1:07
slider so just click process images and
1:11
side by side you will see the watermark
1:14
here is added right
1:18
here so in all the images you will see
1:21
the watermark is
1:22
added and for each image you will you
1:25
can adjust the setting here if you want
1:29
uh you can adjust the brightness here
1:32
you will see the opacity of the
1:35
watermark you can also change the style
1:39
and you can control the location here
1:41
using the mouse here so where you want
1:44
it can just change the opacity as well
1:47
using these
1:52
sliders so whenever you okay you can
1:54
click the button apply changes
1:57
you will
1:59
see here
2:01
again you can do this globally here uh
2:04
by closing
2:07
this so here you will actually
2:11
change the watermark position x and the
2:15
y here the scaling opacity all these
2:17
parameters you can control here for
2:19
globally
2:23
so here you can actually control
2:28
it click on process images and now
2:31
you'll
2:34
see the watermark has been added right
2:38
here you can see
2:43
that you can even control the brightness
2:46
contrast level of each image and then
2:49
after you are finished you can simply
2:51
download all the images as a zip file so
2:55
you will see the images will be
2:57
downloaded and uh in this easy way uh
3:00
this is actually the canva bulk image
3:04
watermark editor uh so if you need the
3:07
full source code of this application
3:08
guys first of all you can try this tool
3:10
or by going to this uh url and this tool
3:15
that i developed here let me show you
3:17
the source code so this is actually the
3:19
source code here a single html file
3:21
right here you will see almost thousand
3:24
lines of code is there it contains
3:27
javascript css and
3:29
html so if you need this full file uh
3:32
the link is given in the description you
3:34
can go to my website procodestore.com
3:36
and purchase this source code after you
3:39
purchase it you will actually get this
3:40
zip file from google drive automatically
3:43
and then you will extract it and you can
3:46
even run this project
3:49
locally in vs code so as soon you can
3:54
run this
4:00
so now this project will open locally
4:02
here you will see and you can repeat
4:05
this process just select multiple
4:12
images you'll see that and then select
4:16
your watermark
4:20
image click on process
4:25
image so you will see watermark will be
4:28
added but if you want to increase the
4:30
size here you can change the scaling
4:33
here and then click on
4:36
process you can see the live preview
4:39
right here also so that you can adjust
4:41
the
4:43
location so now if you see
4:59
you can see the
5:01
watermark has been added right here to
5:04
each
5:06
image you can see that so then you can
5:10
simply click the download all as zip so
5:13
all the images will be downloaded as a
5:15
zips file so it's a single page static
5:18
website uh it doesn't require any server
5:20
and it is really easy to deploy uh you
5:23
just need to uh after you get this index
5:26
html file you go to your shared hosting
5:28
you simply upload this and you can even
5:30
earn some passive income as well by
5:32
placing advertisements the user will
5:34
come to this tool they will actually
5:37
select the images and they will be
5:39
editing their images with
5:42
watermark so this is actually the file
5:45
you will get after you make the payment
5:47
so the link is given in the description
5:49
so for building this we have used the
5:53
open-source packages first of all we
5:55
have used jszip which is a javascript
5:59
library for creating zip files and also
6:02
we have used files
6:05
saver which is a library for downloading
6:08
the file as an attachment so we are
6:09
using these two open-source packages for
6:12
building this canva clone bulk image
6:15
watermark editor so if you are
6:18
interested guys you can actually try out
6:20
the free demo on my of this tool and if
6:24
you are interested the link is given in
6:27
the description so i will be seeing you
6:29
in the next
#Clip Art & Animated GIFs
#Skins, Themes & Wallpapers
#Other
#Video Sharing