Up next in 10
Build Next.js Canva Image Background Removal Clone Editor Using Tensorflow,BodyPix & Mediapipe in TS
Dec 12, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-next-js-canva-image-background-removal-clone-editor-using-tensorflowbodypix-mediapipe-in-ts/
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/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you I built out
0:04
a full stack next.js single page
0:06
application similar to Canva clone to
0:09
actually remove your image backgrounds
0:11
directly in the browser with a single
0:13
click. So this is actually the demo of
0:15
the application. So we have this image
0:18
background removal tool right here. And
0:21
uh let me show you the demo and then
0:23
first after that I will show you the
0:25
source code. So first of all here the
0:27
interface is quite simple. You simply
0:29
select the input image. After that the
0:32
application will automatically analyze
0:34
the image and then on the right hand
0:36
side you will see the output here and
0:38
then you can easily download the output
0:40
image really simply. So now the image is
0:43
successfully downloaded
0:45
and you can easily see the output image.
0:49
So for this we haven't using the any
0:51
sort of API. So we are not using any
0:54
paid API instead we are using
0:56
open-source libraries such as
0:58
TensorFlow, Media Pipe and Body Pix. So
1:02
all the source code is given. You can
1:04
directly purchase it. The link is given
1:06
in the description. So after you
1:08
purchase it, uh the source code will be
1:10
downloaded from Google Drive
1:11
automatically. So each and every
1:13
component is divided into its
1:15
appropriate TypeScript file here. So we
1:18
are running this uh application in the
1:21
terminal and locally as you can see npm
1:24
run that so it's started this nextjs
1:27
application locally it's very easy for
1:29
you to deploy the application as well
1:32
and the second tool is the change
1:34
background tool so this also does the
1:36
same thing it first of all removes the
1:38
background from the input image and then
1:40
it allows you to actually pick a color
1:43
from the color picker
1:46
and click on change background
1:47
background and instantly the background
1:49
of the image is successfully uh changed.
1:53
First of all it change removes the
1:55
background and then it actually allow
1:58
you to change the background with a
2:00
static color. So here you can change the
2:03
color. Just select your favorite color
2:05
and click on change background and
2:06
instantly in a matter of second all the
2:10
processing is taking place directly in
2:12
the browser. It's a single page tool. So
2:15
it doesn't have a back end. So all the
2:18
processing is directly happening it in
2:20
the browser. So if you are interested in
2:24
this, you can actually purchase this
2:26
project and get this full source code.
2:28
And once you get the source code, you
2:30
will be able to see how I coded this
2:32
using those free libraries. And you also
2:36
will be able to modify it or add
2:39
additional features as well. Apart from
2:41
that, we also have tools for converting
2:44
your images into PDF, merge PDF, split
2:47
PDF, PDF to doc as well. So using this
2:51
tool, you can actually convert your PDF
2:53
file. Just select your PDF file and then
2:56
it will convert that PDF into word
2:58
document.
3:00
So you just click on convert and then
3:03
automatically that PDF file will be
3:06
converted to word document file.
3:09
So as you can see it's a Canva clone uh
3:13
image background removal and PDF editor
3:15
tool as well. It has all the features
3:18
here. You can see it converted this PDF
3:22
into word document file.
3:26
And then you can open that word document
3:28
dox file in any editor.
3:33
So you can just see here it converted
3:36
this into word document. So it will save
3:38
you a lot of time as well because uh you
3:41
don't require any special editor rather
3:43
than you can use this.
3:46
You can use it with any image. Let me
3:48
try out with different image and show it
3:50
to you. So basically all the background
3:53
that you see is successfully removed
3:55
here and you can
3:58
these are the two tools here remove
4:00
background and change background. So for
4:02
building this we are using if you don't
4:05
know about tensorflow it's it's a very
4:07
popular library
4:10
we are using this tensorflow
4:13
it's a basically an open-source
4:15
python-based machine learning library
4:17
which allows you to actually remove
4:19
background
4:22
so we are using this and we are also
4:24
using this library media pipe
4:28
which is again a
4:31
Python based library. So we are actually
4:34
using these Python based libraries
4:36
inside our nextjs project so that we can
4:39
use these libraries directly in the
4:41
browser. So this is another machine
4:44
learning library and also we are using
4:47
body pix
4:49
which is again a realtime segmentation
4:52
library which actually analyzes the
4:54
image. First of all, as you select the
4:56
image, first of all, we are using these
4:59
libraries in nextJS to first of all
5:01
analyze the image pixel by pixel and
5:04
then we are removing the background and
5:06
you are seeing this result. So the
5:08
application is really fast as you select
5:10
the image. It doesn't take larger than 1
5:14
second. It just take 1 second for uh
5:17
background removal. So you can basically
5:21
use this tool. So
5:25
again in the same tool we the change
5:27
background tool first of all it removes
5:29
the background and then you can select
5:31
any background and click the it will the
5:35
color will be applied in a matter of
5:37
seconds. So it's coded inside nextjs
5:40
it's a single page tool. So if you're
5:43
interested guys the link is given in the
5:45
description you can directly purchase
5:47
it.