Up next in 10
PHP Project to Build Canva Clone Advanced Image Editor in Browser Using HTML & JavaScript
116 views
Apr 1, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/php-project-to-build-canva-clone-advanced-image-editor-in-browser-using-html-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/
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a PHP
0:04
script uh which can actually build a
0:06
Cana loan so I built a canva clone kind
0:09
of image editor inside PHP HTML CSS and
0:13
JavaScript so you can see I'm running it
0:15
locally so this is a a simple demo right
0:18
here so first of all you can change the
0:20
color of this so it's kind of a Cana
0:24
clone so you select your image that you
0:26
want to edit
0:31
so let me select image here so the image
0:34
will load here so then we have the first
0:38
option here to crop the image so you can
0:41
basically select whichever portion you
0:42
can zoom onto the image so which portion
0:46
of the image you want to crop
0:48
so then we have this tick mark option
0:52
right here so the image will be cropped
0:55
and now we have a set of filters that we
0:57
can apply to the image you will see
0:58
these filters are
1:00
there each filter will apply a different
1:04
set of editing to the image you can see
1:09
that so here from the drop down you can
1:11
select from any
1:17
filter so if you don't want to apply any
1:19
filter you can simply continue and after
1:23
that here comes the best part of this so
1:28
we we have two options right here either
1:30
you can add text onto the image or you
1:32
can add a watermark image so we have the
1:35
text capability so as soon as you click
1:37
this button
1:39
this here you will be able to edit click
1:42
the pencil icon right here to actually
1:45
activate so here you can actually add
1:47
the watermark text
1:50
Watermark and then you can control the
1:52
positioning by the mouse here and you
1:55
can like
1:58
this and then click
2:00
okay and then simply download this
2:04
image so if you open this image you will
2:07
see the text Watermark has been
2:09
successfully added on top of the image
2:11
so in this easy way you can add
2:14
Watermark and if you want to add some
2:17
kind of
2:18
a watermark image that you have so you
2:22
can even add that as well
2:24
so so now this is actually a watermark
2:27
image
2:33
you can see that control it the location
2:36
of this
3:00
can tick mark and then save the
3:03
image so this is actually a PHP uh this
3:07
editor is developed inside PHP let me
3:11
now show you the source code here so
3:12
this is the overall uh directory
3:15
structure of the project uh if you are
3:17
interested in this project the link is
3:20
given in the description you can go to
3:21
my website procore.com and purchase the
3:24
full source code of this project and uh
3:27
once you purchase it you will be
3:28
redirected to Google drive automatically
3:31
and you will actually get the zip file
3:33
you just need to extract the zip file
3:35
and now you will set see
3:38
this set of files here so this is the
3:42
main file here index.php and you simply
3:45
run this script in vs code by simply
3:48
activating it you should have exam
3:52
control panel so this is a PHP software
3:56
for running PHP applications directly
3:58
locally
4:00
so I'm just running this
4:03
here so I just type Here Local Host
4:06
photo editor app so now you will see as
4:09
soon as I type this in the browser the
4:11
application will load so here you select
4:13
your image whichever image that you want
4:15
to
4:19
edit so now you will see the application
4:22
is perfectly working
4:24
so first of all you need to crop the
4:27
image
4:31
so it's something like Snapchat as well
4:33
because you can apply multiple filters
4:34
to your images instantly by a button
4:38
click
4:39
so you can see
4:43
that so we also have this brightness you
4:46
can even control the brightness of the
4:48
image by the slider so it's very easy to
4:51
deploy as well so if you want to deploy
4:53
this application so once you get the zip
4:58
file you just need to upload all these
5:00
PHP files to your shared hosting so it's
5:03
easy to deploy as
5:08
well we contrast as well you can see all
5:12
these sliders are there
5:14
so you can easily edit can blur the
5:18
image as
5:22
well so this is actually canva clone
5:25
image editor guys developed in PHP so if
5:28
you are interested the link is given in
5:30
the description I showed you this demo
5:32
right
5:33
here so you can purchase it also visit
5:37
my website free mediat tools.com which
5:39
contains thousands of tools regarding
5:42
audio video and image and I will be
5:44
seeing you in the next video
#Computers & Electronics