Up next in 10
Build a Advanced Image Watermark Editor to Add Text Over Images in Browser Using Javascript
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-advanced-image-watermark-editor-to-add-text-over-images-in-browser-using-javascript/
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 welcome to this uh live
0:02
session of coding s so here in inside
0:05
this live stream I will introduce to a
0:07
new tool that I
0:09
developed on my website so this is
0:11
actually a advanced image Watermark
0:15
editor so if you want to add text as an
0:19
overlay or as a watermark or logo inside
0:22
your images this will be a very nice
0:25
tool so it's a static tool it works in
0:27
the browser no server side code is
0:30
involved your images are not uploaded to
0:32
the server it only runs in the browser
0:35
so it's a single page application so
0:37
that it actually have this interface
0:39
right here it allows you to select your
0:41
image file or image image extensions are
0:44
supported so you will select your image
0:46
and it will be shown on the right hand
0:48
side with live preview and as you make
0:51
changes you add your logo your company
0:54
name whatever you want to add so you
0:57
will see automatically as you making the
0:59
changes automatically the live preview
1:01
will happen and the logo has been added
1:04
now you can make some modifications you
1:06
can change the size of the text of the
1:09
logo the phone
1:11
size and also you can change the color
1:14
of the text as well by using this Color
1:17
Picker and then you can change the
1:19
opacity so like this and then also you
1:24
can rotate the text as well the rotation
1:28
angle then the horiz horzontal spacing
1:30
between the text you'll see and the
1:33
vertical
1:37
spacing all these parameters are
1:39
customizable you can change these values
1:42
and the result will be shown on the
1:44
right hand side as you change it the
1:46
preview will change
1:50
automatically so let me choose a bright
1:54
color
2:05
so once you are done making the
2:09
changes you can now export your image by
2:11
clicking this button so now the image
2:14
will get downloaded with the modified
2:16
changes that you have done you will see
2:17
that your image has been
2:20
successfully the logo has been added the
2:23
image has been surrounded by the text
2:27
Watermark so
2:34
you can customize everything right here
2:37
the rotation angle everything you can do
2:45
it the horizontal spacing you will see
2:56
that so now this looks slightly better
3:01
because the watermark is now
3:03
visible but the image is also visible so
3:06
in this way you can add your watermark
3:08
very easily using this tool so I
3:11
developed this tool inside HTML CSS and
3:13
JavaScript this is actually the full
3:14
source code almost 143 lines of code so
3:18
if you go to the description of this
3:19
video you will actually find a link on
3:21
my e-commerce website Pro Cod store.com
3:24
and you can directly purchase that
3:26
source code from that website and you
3:29
will actually get a zip file from Google
3:30
Drive after you make the payment you
3:32
will be redirected automatically to
3:34
Google Drive and this ZIP file will
3:36
contain the single index.html file which
3:39
you can directly deploy this if you are
3:41
running a shared hosting or shared Cloud
3:43
hosting you can directly upload this
3:44
file to actually deploy this tool to a
3:46
real domain name and you can earn a lot
3:48
of revenue from advertisements from ISO
3:51
and AdSense so the possibilities are
3:53
endless this is a really simple awesome
3:56
tool with a easy interface once you add
3:59
add your image the user will be able to
4:01
enter their logo or Watermark they can
4:04
select the phone size color you can
4:06
select the opacity rotation angle
4:08
everything each things is customizable
4:11
horizontal spacing vertical spacing so
4:13
once you are done you can simply export
4:15
your image file so the image will get
4:20
downloaded so this basically it's using
4:24
the concept of canvas
4:25
API so we have we haven't used any third
4:28
party dependency see third party package
4:30
it's all happening inside vanilla
4:32
JavaScript HTML CSS so if you used
4:35
canvas API which is built in inside
4:38
every browser we have used this canvas
4:40
API to actually build this awesome image
4:43
Watermark editor with live preview so
4:46
once you select image the user can add
4:48
their logo you can customize all these
4:51
options and choose their Watermark color
4:54
opacity rotation angle
4:56
everything so once you are done you can
4:59
ort your image file like
5:05
this so the nice thing is that it works
5:08
in the browser so no need to install any
5:10
third party app it works in the browser
5:12
it's really fast and effective and just
5:15
it's a static app and the deployment
5:18
process is really simple you just need
5:19
to upload this index HTML file to your
5:22
shared hosting so automatically the tool
5:24
will run in the browser you open it it's
5:27
a single page app and you can just see
5:30
so before you purchase it I at the
5:32
checkout page I've have given the link
5:34
where you can try this tool before
5:35
purchasing it so it is deployed on my
5:37
website freem mediat tools.com image
5:40
Watermark editor so you can
5:42
directly use this tool and once you
5:45
actually get the code you can modify it
5:47
and extend it and add additional
5:50
features as well you will get full
5:51
commercial right to actually modify and
5:54
use this
5:56
so this is 143 lines of code will see
6:00
that it's a fully
6:02
fleshed
6:05
editor so if you're interested the link
6:08
is given in the description of this live
6:17
stream so all the image extensions are
6:20
supported you can take jpg PNG webp file
6:23
each and every file is supported
6:25
extension
6:37
so thank you very much for watching this
6:39
video and I will be seeing you guys in
6:41
the next one
#Multimedia Software
#Online Goodies
#Skins, Themes & Wallpapers
#Photo & Image Sharing