live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Canva Clone Bulk Image Watermark Editor to Add Text Watermark on Multiple Images in Browser
Jan 9, 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/
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
stream of coding seure so in this live
0:02
stream I will actually introduce to a
0:04
new tool that I developed on a website
0:06
freem mediat tools.com uh which is a
0:10
bulk uh image Watermark editor where you
0:13
can
0:15
actually something like canva canva also
0:18
has a watermark editor so I just
0:21
developed that editor right in the HTML
0:24
CSS and vanilla JavaScript we haven't
0:26
used any third party dependency if you
0:29
go to my website freem mediat tools.com
0:31
Advanced image Watermark editor you can
0:33
see the live demo so if you just see
0:37
here you will have this interface either
0:40
you can drag and drop your multiple
0:42
images or you can select it so you can
0:45
select PNG jpg webp GIF all extensions
0:48
are supported so once you select all
0:50
your files all your image files and now
0:53
you can see live preview will also be
0:55
there this is the first image second
0:57
image third Image Fourth image all the
1:00
four images you can see you can have
1:02
this nice little editor on the right
1:04
hand side here you can put your company
1:06
name or logo name so as you can just see
1:08
with live preview as you are doing this
1:10
coding seure automatically the logo is
1:14
updating so as I'm just deleting it
1:17
everything is in Live Sync
1:19
synchronization here you can select some
1:21
phones out
1:23
there whichever phone that you like
1:25
cursive phone is great and then you can
1:28
select the positioning of the logo in
1:30
the top left position top Center or top
1:33
right position here you can even adjust
1:35
the size of the logo as
1:38
well so if you want to adjust the size
1:42
it can be also be
1:47
adjusted and also you can adjust the
1:49
color as well by using this Color
1:55
Picker 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
sixa is placed at the center you can see
2:16
that you can even rotate as well you can
2:19
put a rotation angle 45 you can see now
2:23
the watermark is rotated you can see
2:26
that each and every image is
2:29
automatically inheriting these styes as
2:31
you are making one change right here and
2:34
you can see all the images are getting
2:35
watermarked right here you can adjust
2:38
the text color if you need the blue
2:41
color you can adjust it you will see
2:43
that now all the water marks are blue
2:46
you can even control the opacity as well
2:49
from here first is the one you can say
2:52
nine so the opacity will look something
2:54
like this you can also click the plus
2:57
icon here also to actually add more
2:59
images if you add more images you can do
3:02
as well this is the overall application
3:05
now once you are done you can simply
3:07
click the download zip so what it will
3:09
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
3:18
watermarked and all images have the same
3:21
Watermark that is you are
3:24
added so in this way this is actually a
3:27
canva clone image Watermark editor that
3:30
I developed entirely in HTML CSS and
3:32
JavaScript the link is given in the
3:34
description you can go to my eCommerce
3:37
website Pro Cod store.com and directly
3:39
purchase that full source code this
3:41
actually contains a single index to HTML
3:43
which contains CSS JavaScript and HTML
3:46
code as well so we haven't used any
3:49
third party dependency we have just used
3:51
the concept of HTML canvas to actually
3:54
build this application from scratch this
3:56
is overall code right 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:05
and dedication so if you get this code
4:08
guys you will be able to modify it or
4:10
you can even extend this as well to add
4:13
more additional features you will get to
4:16
understand how to develop realtime
4:18
applications real life applications
4:20
using HTML CSS and JavaScript without
4:22
having using third party dependency we
4:25
use the Dom here document object model
4:29
to actually code
4:30
this so if you're applying for a job or
4:33
if you are a student so it's a realtime
4:36
project it will be a very good project
4:38
to understand how to build a real life
4:41
application in HTML JavaScript and CSS
4:45
and at the checkout page you can even
4:47
try this application I have given the
4:49
link before you purchase it you can
4:51
actually try this on yourself if you are
4:54
comfortable if you like this application
4:56
then you can purchase it you can see you
4:59
can adjust all these adjustment you can
5:03
do so bottom left all these positions
5:06
are 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
the 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:27
and here you can control the opacity or
5:29
you can also change the color as
5:44
well so in this way guys you can uh
5:48
adjust the font you can even add more
5:50
fonts if you get the source code it's
5:52
very 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
6:10
see so once you are done basically
6:14
having you can rotate that as well 180°
6:18
so you can see that so you can rotate
6:19
this as well 45° is best for watermark
6:23
or
6:27
logo you can put any location but Center
6:30
looks good because majority of the
6:32
watermarks comes in the center
6:35
position and here you can control
6:38
whichever color that you
6:41
want after you are
6:43
done can click the download zip and it
6:46
will actually create all the image files
6:50
which will have this logo right
6:54
here 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:10
server side code is involved it entirely
7:13
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 entirely works
7:25
in the browser and the main thing is
7:28
that we actually use is very little code
7:31
to actually develop this
7:33
application and uh it's very
7:37
nice you can just see right here the
7:40
application interface also is very user
7:43
friendly
7:45
so no confusion in order to basically
7:48
use this it's very easy to implement you
7:51
can see that very nice Watermark is
7:54
added to all the
7:56
images so the link is guys in the given
7:59
in the description of this live stream
8:01
you can go to my e-commerce website and
8:04
purchase it you will be redirected to
8:06
Google Drive where you will actually get
8:07
the zip file if you still face any
8:10
problem you can contact me at my email
8:11
and phone number and you can first of
8:14
all try this app by going to my website
8:18
which I've given in the checkout page
8:20
the live demo link before you purchase
8:22
it so thank you very much for watching
8:23
this video and I will be seeing you guys
8:26
in the next one
#Business & Industrial
#Computers & Electronics
#Skins, Themes & Wallpapers