videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a HTML5 Canvas Editor to Add Text Watermark on Images With Live Preview 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-editor-to-add-text-watermark-on-images-with-live-preview-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:00
hello guys welcome to this video so in
0:03
this video I will actually show you a
0:06
another image Watermark editor that I
0:09
developed this time it is able to add
0:12
only text watermarks so if you want to
0:15
add text as an overlay of on the image
0:19
this application will be very useful for
0:21
you so many of times you need to
0:23
actually add your company name or logo
0:27
text inside on top of the image so in
0:30
that scenario this tool will be really
0:32
helpful so what you need to do all image
0:36
extensions are supported PNG jpg webp
0:40
GIF all this let me select this JPG file
0:44
and here you need to provide your
0:45
company name Logo name anything let me
0:47
provide coding sixa and here you can
0:49
adjust the size you can even rotate it
0:52
you can adjust your pick the color of
0:55
the text using this color pickle and
0:57
then we can also adjust the opacity as
0:59
well so if I put 45 and click on ADD
1:02
Watermark you will see that
1:04
automatically my image will be
1:06
surrounded by this coding section name
1:08
right here and let's suppose I can even
1:10
adjust the size as well if I put 50 here
1:13
now the text will be large right here
1:17
you can see the watermark is keep on
1:20
repeating right here this is actually
1:22
your image has been water stamped or it
1:26
has been surrounded by the logo then you
1:28
can simply click click the download
1:32
button to actually download the result
1:35
and now if you open the file you will
1:37
actually see coding sea is written all
1:40
over it and your image has been
1:42
successfully watermarked so in this way
1:45
you can put your company name put your
1:47
logo inside on top of the image files
1:50
and here you can rotate you can control
1:52
the angle let's suppose I want to rotate
1:54
it by 90° so I will put 90 and now the
1:58
you can see that so it totally up to you
2:01
you can just use this application
2:03
accordingly and I have coded this
2:06
application inside pure HTML CSS and
2:09
JavaScript we haven't used any third
2:11
party dependency we have used the HTML
2:14
canvas API which is a built-in concept
2:16
inside JavaScript and we are actually
2:20
using this to actually build this and uh
2:24
it is live with live preview you can see
2:26
you can adjust these parameters and you
2:28
instantly see the result and your image
2:31
is not uploaded to any server it is all
2:33
happening on the client side in
2:35
JavaScript so it's a totally browser
2:37
based application a single page app and
2:39
the link is given in the description you
2:41
can directly purchase the full source
2:43
code of this project and once you
2:45
purchase it you will be redirected to
2:46
Google Drive where you will actually get
2:48
the zip file so it's a single index.
2:51
HTML file and you can see that this is
2:54
the actual overall code right here 291
2:56
line ofof code that I've written from
2:58
scratch this is actually a application
3:01
so it's a single page application you
3:03
can directly rank this website on Google
3:06
and or you can modify this or you can
3:08
extend this
3:09
application so the thing is really
3:12
simple you can see that
3:17
uh you put
3:20
this now you can see that coding red
3:24
color you can adjust the color as as
3:27
well accordingly you'll see that but
3:31
instantly your image will be watermarked
3:33
and uh you don't need to use any
3:35
thirdparty website you will be having
3:38
your own application written in pure
3:40
JavaScript HTML and CSS so it runs in
3:43
the browser so no need to uh have
3:46
hosting problems you can directly Host
3:48
this application on any hosting plan you
3:51
can purchase a shared hosting purchase a
3:53
domain name and just write some test
3:55
content and you can rank this website
3:57
directly on Google users will come to
4:00
your website and just do this stuff
4:02
really easy because this process is
4:06
really required by users because most of
4:10
the time we do need to put add put uh
4:13
text on top of the images so for that
4:16
users will come to your website and it's
4:18
a very common task for image Ed
4:23
editing many of times you need to
4:25
protect your photographs from copyright
4:28
issues so that's why you put your
4:29
company name Logo name on top of this so
4:32
in that scenario this application will
4:34
be really useful so the link is given
4:36
guys you can go to my website e-commerce
4:38
website Pro Cod store.com and directly
4:40
purchase the full source code of this
4:42
application after you purchase it you
4:44
will actually get the zip file and this
4:47
is actually a single index. HTML file
4:49
that you will need and you can run this
4:51
application locally as well by simply
4:53
opening this with live server and you
4:55
can see that the application is really
4:57
fast it will open instantly and here you
5:00
can adjust all these parameters opacity
5:03
text rotation angle size and you can
5:06
choose your favorite color right here
5:08
from the Color Picker right here and
5:11
then the color will also automatically
5:13
gets updated and once you are done you
5:16
can download the image file very easy
5:18
very simple application not a very high
5:22
logic application very simple but yet
5:25
effective you can see that so this was
5:28
the application guys thank you very much
5:30
for watching this video and I will be
5:32
seeing you in the next live stream
#Online Goodies
#Clip Art & Animated GIFs
#Skins, Themes & Wallpapers
#Photo & Image Sharing