Up next in 10
Build a HTML5 Canvas Image Watermark Editor Tool to Overlay Multiple Images in Browser Using JS
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-html5-canvas-image-watermark-editor-tool-to-overlay-multiple-images-in-browser-using-js/
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:02
uh hello guys welcome to this uh live
0:04
session of coding sixa so in this uh
0:07
video I will actually show you a new
0:11
Watermark editor that I developed inside
0:13
browser so this is actually a tool that
0:17
I developed on my website you can also
0:19
check out free mediat tools.com and the
0:23
link of the purchase of the source code
0:26
I have given in the description of this
0:28
live stream so if you go to my we
0:31
site you will actually find this tool
0:33
right here canvas image Watermark editor
0:37
if you go to this tool the interface
0:39
will look something like this it is
0:40
entirely coded inside HTML CSS and
0:43
JavaScript we haven't used any
0:45
thirdparty framework or third party
0:47
Library it is entirely coded inside the
0:49
vanilla JavaScript and we have actually
0:52
used the canvas API so the interface
0:54
looks like this you need to select your
0:56
file here you can just select any file
0:59
of youro CH it can be either PNG JPG
1:02
webp file any file so let me select my
1:05
file here
1:07
uh uh let me select this
1:12
file so as you select the file here it
1:15
can be webp it can be PNG it can be jpg
1:18
any file and then we have this option to
1:20
also maintain the aspect ratio it is
1:23
automatically checked you can just have
1:25
the width and the height and then here
1:27
you need to put the watermark image so
1:29
whatever is the logo whatever is the
1:30
watermark you will simply select it and
1:33
then where is you want to place this
1:35
logo at the center top left top Center
1:38
top right all these positions are there
1:40
and then you can uh adjust transparency
1:43
so once you all done simply click this
1:45
button and now in the basically the live
1:47
preview screen you will actually see the
1:49
result so here you can adjust all these
1:52
parameters so if you want this logo to
1:54
appear in the top left position just
1:56
select this and now the logo will move
1:58
right here if you want want to position
2:00
it in the top Center it will look
2:03
something like this all these positions
2:04
are supported top right position then we
2:07
have the top bottom left you can see
2:10
that we have the bottom right bottom
2:13
center bottom right all these positions
2:16
so once you are done you can actually
2:19
also increase the width or decrease the
2:22
width of the logo so let's suppose if
2:24
you want to make it smaller so now you
2:26
can see that the logo is appearing in
2:28
the bottom right corner of the screen
2:30
and it is slightly adjusted the width is
2:32
also automatically adjusted based upon
2:35
the aspect ratio and now you can save
2:38
your image file simply click the save
2:39
image button and your watermark will be
2:42
appeared right here you will see that so
2:44
in this way you can actually uh this is
2:47
a complete editor that I developed from
2:49
scratch the link is given in the
2:52
description of this live stream you can
2:54
directly go to the checkout page and
2:56
directly purchase the full source code
2:57
of this application so it is as you can
3:00
see only a single index. HTML file is
3:03
there and you can see that it is a very
3:06
good application that I developed and we
3:09
have used HTML CSS and JavaScript after
3:12
you purchase it you will actually get
3:13
the zip file uh from Google Drive
3:16
automatically whenever you purchase so
3:18
if you face any sort of problem you can
3:20
contact me at my email address or so it
3:23
is entirely hosted you can host it by
3:26
purchasing a domain name and you can
3:27
deploy this tool directly by uploading
3:29
this index HTML file so it is entirely
3:33
so again if I show you again you need to
3:35
select your
3:37
file you can also increase the width or
3:39
decrease the width by adjusting these
3:41
options and then you put put your logo
3:44
as
3:45
well and uh adjust the transparency you
3:49
can see you can adjust the opacity of
3:51
the logo by adjusting these sliders so
3:55
you can just adjust it you can adjust
3:58
the size of the logo as well
4:00
so 100 by 77 so it will look something
4:03
like this so you can just adjust all
4:06
these parameters once you are done you
4:07
will see that you can adjust it if you
4:10
want it in the center
4:12
position just select center now it will
4:16
appear in the center position and you
4:18
can even adjust the size of the source
4:20
image let's suppose I want to resize
4:22
this image to 500 width and
4:25
375 so now the image will be resized so
4:28
now the image is 5 500 you can adjust
4:31
this to
4:33
200 so now you can see the image has
4:35
been resized it is slightly smaller
4:38
image you will see that the image is
4:40
resized based upon you can adjust the
4:42
resize resize the image you can put the
4:44
logo at whichever location that you want
4:47
it is entirely up to you you can adjust
4:50
the size of the logo as well so all
4:52
these things are automatically being
4:54
translated
4:55
so you can see that
4:58
so this is the entire application guys
5:01
you can uh go to the checkout page and
5:04
also I have given the free link where
5:06
you can actually try this tool before
5:08
purchasing it at the checkout page I
5:10
have given the link where you can try
5:12
this tool on my website free mediat
5:13
tools.com so
5:16
here you will put your logo and then
5:20
adjust this and you will see that it is
5:23
automatically adjusted the position you
5:25
can control the width of the
5:28
logo by put
5:32
automatically the height will be
5:34
calculated and it will be placed at
5:36
whichever location that you select right
5:37
here so we have actually used vanilla
5:41
JavaScript we have used the HTML canvas
5:44
API to actually develop this application
5:47
so you can see that entirely a single
5:49
index. HTML file is there so no third
5:51
partyy packages we have inst we have
5:53
used so it's entirely HTML canvas API to
5:56
actually develop this Watermark editor
5:58
with live preview
6:00
and once you are done you can save this
6:02
image by clicking this button save image
6:05
so now your watermark image will be
6:07
placed right here you will see that the
6:09
logo is placed so you can adjust the
6:12
size of this logo accordingly if you
6:14
want it
6:15
bigger here now you can see that
6:18
so bottom
6:22
right can just adjust the size
6:25
accordingly now I think it's looking
6:27
good so basically all the time logos are
6:31
appear at the center or in the bottom
6:34
right position so if you save it now it
6:37
will look something like this so this is
6:39
a really handy application guys you will
6:41
get to know more about it if you
6:43
purchase it you can modify this you can
6:45
extend this code and you will get to
6:47
know about how to use HTML canvas API to
6:49
develop these real time application real
6:51
life applications not any hello world
6:54
applications so I'm just giving you the
6:56
source code for the link is given you
6:58
can directly go to my e-commerce website
7:00
Cod store.com and directly purchase that
7:03
full source code and before purchasing
7:05
it you can even try this on my I've
7:08
given the link to the free demo then
7:11
check out this tool before purchasing it
7:13
and thank you very much for watching
7:15
this video and I will be seeing you in
7:17
the next one
#Other
#Video Sharing