Up next in 10
Build a React.js Image Cropper Editor With Live Preview Using react-easy-crop Library in JSX
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/e05f7a0ac32e361ad97e550043fb7967
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a react CH
0:04
package which allows to build image
0:07
croper kind of application so there's a
0:11
choose file button available to us and
0:13
here you can select any image and then
0:15
we have this nice little UI where you
0:18
can crop your images with live preview
0:21
so you can select any part of the image
0:23
that you want to crop or cut and you can
0:26
simply select it with this user
0:28
interface zoom in zoom out let's suppose
0:31
I want to crop this portion so we have
0:34
this button available so I click this
0:36
button and this image is successfully
0:38
cropped and now I can download this
0:41
image so in this easy way you can crop
0:44
the
0:45
image and actually the package name is
0:49
if you just go to npmjs.com
0:52
and just search for this package which
0:55
is react easy
0:57
crop it's essentially made for react
1:00
only this
1:02
package so you can easily configure it
1:05
so this is actually the command I've
1:07
already installed it it's very popular
1:10
308,000 weekly downloads and they do
1:13
offer a documentation website as well
1:16
react easy crop it's called and you can
1:20
even zoom in you can rotate the image as
1:22
well flip the image in like this
1:26
vertically horizontally you can show the
1:29
result in it modal windows so it's
1:31
having complete example theyve given on
1:33
your website so I will just show you a
1:36
very simple example of this package so
1:38
first of all you need to import
1:42
this package so after making this
1:45
functional
1:46
component we use the import line here at
1:49
the top import
1:54
Cropper and this will be coming from
1:56
this package which is react easy crop
2:01
and it's almost 24 kiloby of
2:05
size and now we need to declare some
2:08
State variables for this application for
2:11
the image we need to declare a variable
2:14
use the UST State
2:17
hook and then for the crop also we have
2:20
to have a variable for that as well so
2:24
for the crer initial coordinates here x
2:27
coordinate will be zero y will also be Z
2:32
Z and then for the zoom level as
2:35
well we need a
2:37
variable so initial zoom level will be
2:41
one and then whatever crop area that you
2:45
will crop so we need this variable for
2:50
that so initial value will again be
2:53
null then we show the output image
2:57
cropped image
3:00
for that also we need a variable so that
3:03
the user can show the output cropped
3:05
image so initial value will be
3:08
null so these are all the variables we
3:11
have declared this is required for this
3:13
application now we come to the jsx where
3:16
we need to build our application so
3:19
right here we will have an H1 heading
3:22
which will
3:24
say react easy
3:27
Cropper example and then we simply allow
3:31
the user to select the image file so we
3:33
have this input type file and we'll only
3:35
be accepting image files so image/
3:40
star and we B an onchange event handler
3:43
so when the image is changed we will
3:44
execute this function on image change so
3:48
this function will execute whenever you
3:50
select the image
3:53
file so I will just Define this function
3:56
on image
3:58
change so e parameter will automatically
4:01
be passed so here we need to read the
4:06
image so when the image is selected so
4:09
we'll have this if condition that if
4:11
the image is selected by the user then
4:17
only we need to read this
4:25
image so for reading this image we will
4:28
use
4:29
the file reader API like
4:35
this which is available in the browser
4:38
file reader make a new Constructor
4:41
object of it and this reader object
4:44
contains a onload function which we can
4:47
simply call so when the image is loaded
4:50
we will call this hook function set
4:52
image to set the image from the base 64
4:56
code that we got we can use this
4:58
function read as data
5:00
URL and pass the file so this will read
5:03
the image and it will load this image in
5:05
the memory now we need to show the
5:08
proper UI so for showing that proper UI
5:11
we just need
5:14
to first of all we need to show the
5:16
actual image which is selected so if the
5:18
image is selected then in that case we
5:21
need to show the
5:24
Cropper and I will just make it a
5:26
position of relative and if width of
5:32
100% and a height of 400 pixel of the
5:36
Cropper so inside this we show the
5:38
Cropper
5:39
component and it actually takes some
5:41
options first of all the actual image
5:43
that you want to crop the second option
5:46
is actual
5:48
crop variable we have declared if you
5:50
see initial coordinates are 0
5:53
0 and then the zoom level initial Zoom
5:57
is one and then we have this three call
6:00
back functions so when the image is
6:03
changed cropped this function will
6:05
execute set crop and when the zoom level
6:09
is changed then we need to set the
6:11
zoom and then when the crop is complete
6:14
this crop call back function will
6:16
execute so we'll actually call these
6:19
three functions for cropping zooming and
6:22
when the cropping is complete so we just
6:24
need to Define both all these three
6:27
functions so
6:30
first of all when the cropping will be
6:33
completed this function will execute on
6:36
crop
6:38
complete so we'll get this cropped
6:43
area and the cropped area pixels so we
6:48
just need to set the cropped area pixels
6:51
to whatever is
6:53
the thing and after this we also need to
6:59
Define the function
7:05
for so we set crop set Zoom is already
7:08
set if you see we are using these hook
7:11
functions so if you just refresh the
7:14
application you will choose this choose
7:16
file button and you will select your
7:18
image and this image Cropper will show
7:21
and now you will able to zoom this image
7:23
or select whatever portion that you want
7:25
to select and then we need a simple
7:28
button to simp simply crop the image so
7:31
now after this just outside this we need
7:35
a button so
7:37
that here we say that crop and we will
7:41
bind this onclick listener to this
7:43
button so we simply say show show
7:46
cropped image we will bind this function
7:50
so now we just need to declare this
7:53
function cropped
7:55
image so once you click the button this
7:58
function will execute cropped
8:07
image I think sorry show cropped image
8:10
sorry show cropped
8:15
image so inside just make this function
8:17
as
8:19
async and inside this function first of
8:22
all we will compare that if the image is
8:25
not selected or if the cropped portion
8:28
area is not there in that case return
8:31
either of these case but if the cropped
8:34
image is selected
8:36
and we need to get the cropped
8:40
image declare a function here we will
8:43
pass the image and the cropped area
8:46
pixels and then we will set the cropped
8:50
image the output
8:52
image to the actual cropped image which
8:54
is returning so now we just need to make
8:56
this function which is get cropped image
9:01
which takes this function takes two
9:04
arguments first is the input image and
9:06
secondly the cropped area
9:15
pixels so now inside this function uh
9:18
you take the actual image which is
9:21
contained inside image
9:23
source and second variable is the
9:27
cropped area pixels
9:32
so this is the main function and here
9:34
inside this we will return a simple
9:36
promise from
9:38
this either this promise will resolve
9:42
and
9:43
reject and first of all we need to read
9:46
this image by using the image
9:48
Constructor image
9:50
source so you read the image first of
9:53
all onload once again this event will
9:56
fire
10:00
so for the cropping this image we first
10:02
of all need to draw this image on the
10:04
canvas for this we need to create a
10:06
dynamic element of canvas by using
10:09
Create
10:10
element and then we just need to make
10:12
sure we equal the width and the
10:17
height whatever is the cropped
10:21
width canvas height is cropped
10:27
height and then we draw this this image
10:29
on the canvas for this we do need the
10:32
context here so get context 2D context
10:34
we will get this and then it contains
10:37
this function draw image it will draw
10:39
this image on the canvas so it takes the
10:42
actual image that needs to be drawn and
10:44
then the coordinates the x coordinate of
10:46
the cropping the
10:48
Y the width of the cropping portion the
10:52
height and
10:54
then x coordinate and y coordinate and
10:57
the width
11:04
and after drawing the image on the
11:06
canvas now we can resolve this promise
11:08
and get the base 64 code by invoking
11:11
this function to data URL and passing
11:14
the MIM type which is image/png this
11:17
will return the base 64 code of that
11:20
image and
11:22
uh that's all that we need to do and
11:25
after
11:27
this we need to show this output image
11:29
in the can in the browser so just after
11:32
this
11:34
button you will compare that if the
11:36
cropped image is available in that case
11:39
in the jsx we need to show a download
11:45
button so we can first of all show the
11:48
output image as well cropped image
11:53
preview we will have this image tag and
11:55
we show this cropped image
12:02
just
12:03
make the styling
12:09
here Max width I will just say it is
12:17
100% And after this you'll have a simple
12:20
download image button so you'll just
12:24
bind an onclick listener to it so
12:27
download image
12:31
so now we just need to Define this
12:42
function so inside this function uh it
12:45
is really easy with downloading image
12:47
and attachment we create the anchor
12:50
tag so it's a very simple process we do
12:53
it put a hf2 equal to whatever is the
12:57
cropped image base 64 code and we give
12:59
the file name and then click on it this
13:02
completes the application if you select
13:04
your image now crop whatever portion
13:07
zoom
13:08
in click on crop and you will see this
13:11
cropped image showing click on download
13:14
image and you will see your image will
13:16
get downloaded so this is overall
13:19
application that we built image Cropper
13:21
with live preview using this package
13:24
react easy crop it's a very good famous
13:28
package in react
13:30
so all the source code will be given in
13:32
the description of this video so you can
13:34
check out the source code and thank you
13:37
very much for watching this video and do
13:39
check out my website as well uh free
13:41
mediat tools.com
13:43
which contains thousands of tools
13:45
regarding audio video and image and I
13:48
will be seeing you in the next video
#Programming
#Software