Up next in 10
Build a Canva Image Blur Editor to Blur Images Using Magic Brush in Browser Using HTML & JavaScript
Jun 24, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-canva-image-blur-editor-to-blur-images-using-magic-brush-in-browser-using-html-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:03
stream so in this live stream I will
0:04
show you a new tool that I deployed on
0:07
my website freemediatools.com uh this
0:10
tool actually resembles similar to Canva
0:13
and it all allows you to uh blur your
0:17
images using a magic brush uh let me
0:20
show you the demo of this application
0:22
the applications looks like this we have
0:24
this image blur editor similar to Canva
0:28
and here you need to select whichever
0:30
image you want to blur out certain
0:33
portions of it so you simply navigate to
0:37
the folder where you want to blur out
0:41
the image let me select let's suppose
0:44
this image
0:48
you simply first of all select the image
0:50
and after you select the image the live
0:52
preview of the image will be displayed
0:55
and then we have these two controls out
0:57
there we can have this magic brush as
0:59
you see in similar to canva as well you
1:02
can control the size of this brush or
1:05
the strength of the blur as well so both
1:08
these sliders so here you can control
1:10
the brush size so now using your mouse
1:14
you can blur out
1:17
the actual portions that you want to
1:19
blur out and here you can control the
1:22
strength of the blur so using this
1:24
slider
1:26
and if I increase the value the strength
1:30
of the blur will increase and using this
1:32
mouse here you can easily blur out
1:34
portions after you blur out the image we
1:38
have this download button as you can see
1:40
right here we download this output image
1:44
now if I see this output image you can
1:47
see the output image is blood this code
1:50
this tool is entirely coded inside HTML
1:52
CSS and JavaScript it's entirely static
1:55
tool which works right in the browser
1:58
itself and no serverside code is
2:00
involved and if you need the full source
2:02
code you can go to the description link
2:05
and directly purchase the source code
2:07
after purchasing it you will get this
2:08
zip file
2:10
which and then inside this extract the
2:13
zip file you will get this single
2:15
index.html file so as you can see this
2:18
is the code of this tool here it's
2:21
entirely inside HTML CSS and JavaScript
2:24
almost 625
2:26
lines of code so I written this tool
2:29
entirely from scratch so if you're
2:31
interested you can directly purchase it
2:34
before purchasing it you can try this
2:36
tool and at the checkout page i have
2:38
given this direct link to this tool so
2:41
let me once again go through this tool
2:44
you simply select the image whichever
2:49
image you want to edit
2:52
after that we have these two brushes
2:54
using this magic brush similar to canva
2:57
here you can control the size of the
2:59
brush and the strength of the blur as
3:01
well
3:03
and then using this brush let's suppose
3:05
I want to hide this portion
3:08
so yeah we want to hide the background
3:10
so using this you can easily do this
3:14
thing here you can hide your background
3:16
you can blur out this portion using this
3:19
nice little magic brush you can control
3:22
using this mouse here uh in this easy
3:26
way you can blur out specific things
3:28
that you don't want to show
3:31
you can see how easy it is and now you
3:33
can see all this background has been
3:36
blurred out and now if you're sharing
3:39
this image to someone you they can't see
3:41
your background so you can see how easy
3:43
it is and now you can click the download
3:45
button and it's a very useful tool and
3:49
it's once you get the source code you
3:51
will see how I coded this it's a very
3:54
fun little project and uh the link is
3:56
given in the description you can see
3:58
it's entirely coded inside HTML CSS and
4:00
JavaScript so once you get this source
4:03
code you can open this project locally
4:05
here and now you can see we are running
4:07
it locally here and once again you
4:11
repeat the process select whatever image
4:14
file you want to and then you can
4:16
control the brush size everything
4:19
and then once again you simply blur out
4:23
the portion that you just don't want
4:26
people to see right here you can blur
4:27
out the background very easily
4:32
so thank you very much guys for watching
4:35
this video if you need the source code
4:38
the link is given you can directly
4:39
purchase it and uh I will be seeing you
4:43
in the next live stream