Up next in 10
Build Next.js Canva Image Background Removal Clone Editor Using Tensorflow,BodyPix & Mediapipe in TS
Mar 13, 2026
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/
Show More Show Less View Video Transcript
0:00
Uh [clears throat] hello guys, welcome
0:02
to this video. So in this video I'll
0:03
show you I built out a fullstack nextjs
0:06
single page application similar to Canva
0:08
clone to actually remove your image
0:11
backgrounds directly in the browser with
0:12
a single click. So this is actually the
0:15
demo of the application. So we have this
0:17
image background removal tool right
0:19
here. And uh let me show you the demo
0:22
and then first after that I will show
0:24
you the source code. So first of all
0:26
here the interface is quite simple. You
0:28
simply select the input image. After
0:30
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:46
and you can easily see the output image.
0:49
So for this we haven't using the any
0:52
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. 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 and
1:48
instantly the background of the image is
1:51
successfully uh changed. First of all it
1:54
change removes the background and then
1:56
it actually allow you to change the
1:59
background with a static color. So here
2:02
you can change the color. Just select
2:04
your favorite color and click on change
2:06
background and instantly in a matter of
2:08
second all the processing is taking
2:11
place directly in the browser. It's a
2:13
single page tool. So it doesn't have a
2:16
back end. So all the processing is
2:19
directly happening it in the browser.
2:22
So if you are interested in this, you
2:25
can actually purchase this project and
2:27
get this full source code. And once you
2:29
get the source code, you will be able to
2:31
see how I coded this using those free
2:34
libraries. And you also will be able to
2:38
modify it or add additional features as
2:40
well. Apart from that, we also have
2:42
tools for converting your images into
2:45
PDF, merge PDF, split PDF, PDF to doc as
2:49
well. So using this tool, you can
2:52
actually convert your PDF file. [snorts]
2:54
just select your PDF file and then it
2:56
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. So as
3:10
you can see it's a Canva clone uh image
3:13
background removal and PDF editor tool
3:16
as well. It has all the features here.
3:19
You can see it converted this PDF into
3:23
word document file
3:26
and then you can open that word document
3:28
dox file in any editor.
3:33
[snorts] So you can just see here it
3:36
converted this into word document. So it
3:38
will save you a lot of time as well
3:40
because uh you don't require any special
3:42
editor rather 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 Python
4:16
based machine learning library which
4:18
allows you to actually remove background
4:22
so we are using this and we are also
4:25
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:32
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 NexJS it's
5:40
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.