0:00
show you a canvas style image blur
0:03
editor that I developed directly in the
0:05
browser using HTML, CSS and JavaScript.
0:08
So this is the actual interface of the
0:10
application. I've also given the demo
0:12
link at the check out page. You can go
0:14
to the description link.
0:17
So this is the actual editor. So once
0:19
you land on this, you simply select your
0:22
image. After selecting the image, the
0:25
image will get loaded in the browser. So
0:27
here you can adjust the brush size, the
0:31
blur strength. So if you want to make it
0:34
bigger, you basically make it bigger.
0:35
And now if you want to blur out this
0:38
portion, you simply do this. And now you
0:41
will see exactly the image is
0:43
successfully blurred. And then you have
0:46
the download button. And then simply you
0:49
download this image. So this makes it
0:51
really easy. It's similar to Canva image
0:56
So this is the output result you get
0:58
very simple static web application
1:01
single page tool. This is the actual
1:04
source code. If you want to purchase it
1:08
I I have given the source code in the
1:11
description of this video. You can
1:13
directly purchase it. So this is a
1:16
single index.html file.
1:22
as you can see here this is the overall
1:24
source code here about 700 lines of
1:26
code. It is having almost all HTML, CSS
1:30
and JavaScript. You can run this locally
1:39
So again you repeat the process. It
1:41
doesn't matter. It can contain multiple
1:44
persons as well. You basically load the
1:47
image, adjust the brush size
1:51
and just so it's very easy as you can
1:54
see using your mouse you can blur out
1:56
the portions that you don't need and uh
2:00
then click download and same thing
2:04
happens you will see it has blurred out
2:06
those portions it's a really simple
2:10
editor similar to Canva image blur kind
2:13
of a can even adjust the blur
2:15
strength as well. If you completely want
2:18
to hide, you can even do that as well.
2:20
So using these sliders, the strength of
2:23
the blur, the size of the brush. So it's
2:26
a brush based editor where you make use
2:29
of the brush to blur or hide specific
2:32
parts of the images. So it's a single
2:35
page application. Really simple.
2:38
It doesn't have a back end. It's
2:40
completely a static app
2:43
inside HTML, CSS, and JavaScript. You
2:46
pick up your image just
2:54
like this. Really simple. It will save
2:56
you a lot of time as well. So many times
2:59
we do need to blur out specific parts of
3:02
the images. This is the overall source
3:04
code. You directly purchase it. the link
3:08
I have given in the description of this
3:09
video. It bas basically we are using
3:12
open-source uh canva canvas API for
3:16
building this editor directly in the
3:21
So before purchasing it you can check
3:24
out the live demo. I've given this live
3:30
so once you land on the page you will
3:32
see the live demo link as well. So you
3:35
can check out the demo
3:38
and the moto is very simple. You upload
3:41
image. The image is not uploaded.
3:45
The processing is entirely happening at
3:47
the server side. So nothing is uploaded.
3:50
It is this application is doing its job
3:53
directly in the browser.
3:57
So it's really easy as you can see.
