0:00
Uh hello guys in this video I'll show
0:02
you I built out a image background
0:04
removal editor in ReactJS using imag.
0:10
So this is actually the package that we
0:12
are using to actually remove the
0:13
background from images. So this is a
0:15
single page application directly runs in
0:17
the browser. The interface looks
0:19
something like this. It's similar to
0:21
Canva. So this is actually the full
0:24
directory structure. We are using the
0:25
latest version react 19. As you can see,
0:28
we are using this media pipe image
0:31
background removal package. If you're
0:33
interested in this project, I have given
0:35
the link in the description. You can
0:36
directly purchase the full source code.
0:38
After purchasing it, you will get the
0:40
source code from Google Drive. It's
0:42
fully customizable. You can actually
0:44
customize each and every line of code
0:46
here. We are running it on local host.
0:50
So, the interface looks quite simple.
0:52
You actually select a image file that
0:54
you want to remove the background. the
0:56
image will load directly in the canvas.
0:59
And now we have these brush. You can
1:01
adjust the size of the brush to remove
1:03
the background. So here you actually
1:06
remove the background as soon as you
1:09
simply select the portion
1:12
and instantly that background will be
1:16
So you can just see how easy it is
1:20
to remove the unwanted sections from
1:23
your image such as the background.
1:27
And as soon as you do this instantly it
1:37
Uh you can just see here using your
1:39
mouse you basically remove the unwanted
1:41
section. If you're interested in this
1:44
project guys, the link is given in the
1:46
description. It's a fullyfledged
1:50
it runs directly in the browser. It
1:52
doesn't have a back end.
1:55
So if you're interested in this project,
1:59
you can purchase the full source code.
2:18
Can just see here how easy it is. Just
2:22
use your mouse to actually remove the
2:25
If by mistake you actually remove the
2:32
So now we have this restore button. So
2:36
you basically click this and here if any
2:40
part of your image is
2:43
you can actually use this.
2:47
So you can just see how easy it is
2:54
and now you can use this one.
3:15
and then after you done you basically
3:18
have this download image button to
3:20
actually download the output image. So
3:23
it's a fully fleshed editor guys. It
3:25
will save you a lot of time to actually
3:27
remove the background from the image.
3:29
You have these brush. You can adjust the
3:31
size of the brush depending upon what
3:34
part of the image you want to restore or
3:36
erase. It's a fully fleshed editor
3:38
similar to Canva. It's you can deploy
3:41
this application really simply.
3:44
So you can even add more features to
3:46
this application once you get the source
3:48
code. The link is given in the
3:50
description. It's divided into multiple
3:51
components in TypeScript. As you can
3:56
it's fully customizable. We are using AI
3:58
models such as ONX runtime, web, media
4:01
pipe, imag. So quite a number of
4:04
libraries that we are using. So
4:07
it will be a great project for you to
4:09
purchase it. The link is given in the
4:12
description. So here you can adjust
4:20
This is for the erase one.
4:36
So you can just see how easy it is.
4:45
So if you're interested, you can also
4:47
zoom in with certain parts.
4:57
Then we have this restore one.
5:14
So if you're interested in this project
5:16
guys, the link is given in the
5:17
description. It's fully coded inside
5:20
React. It's a single page application
5:22
for removing your background.
5:25
So definitely purchase this project.
