Up next in 10
React.js Project to Build Image Cropper Editor Using react-image-crop Library
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/8d8bc6758de4627104557378d8e5f299
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
crop your image with live preview and
0:07
we'll build a complete image editor
0:10
where you will able to crop your image
0:13
using the control so if I select any p&
0:16
or jpg image you will see the image will
0:19
display and you'll see these Cropper
0:20
controls out there so you need to crop
0:24
the image and you will see the live
0:25
preview as we crop the image you will
0:28
see on the right hand side the cropped
0:29
image will show it will automatically
0:32
update and if you want to only crop this
0:35
portion
0:37
out so in this easy way you can crop the
0:40
portion and there is a download button
0:42
shown right here and you can download
0:45
the cropped image you will see that so
0:48
in this easy way you can crop your image
0:50
and download this so I will show you the
0:54
complete application of this and for
0:57
this we are using this package which is
0:59
react image propop so if you just go to
1:03
npmjs.com and just search for this
1:06
package react image
1:10
crop so this is essentially we are using
1:12
this
1:13
package to make this application and
1:17
almost 450,000 weekly downloads are
1:19
there and this is actually the
1:21
command so just install this I've
1:24
already installed it so I will just show
1:26
you a very basic example on how to make
1:29
this application
1:30
so first of all we do need to import
1:33
this package some methods are available
1:36
pre-built one such method component is
1:39
react crop so it will be imported from
1:42
this react image crop package and it
1:46
also contains these method to Center the
1:48
crop and make aspect crop so we are just
1:52
importing this and also we do need to
1:55
import the CSS file of this as well so
1:58
I've just imported the CSS file of this
2:01
package for adding the CSS that's all
2:04
and now in this component we do need to
2:06
install basically declare some variables
2:09
for keeping track of which image is
2:11
selected and for this we'll be using the
2:14
UST State
2:15
hook and initial value will be null and
2:19
then you'll be having the scop and the
2:22
set crop so for this the initial value
2:26
will be an object right here so here
2:28
we'll be initializing some values inside
2:30
this object so the first value will be
2:33
the unit so we will be cropping the
2:36
image in
2:37
percentage and then the x coordinate of
2:40
the Cropper will be 25 the y coordinate
2:42
so these are just the initial
2:44
coordinates the width of the Cropper you
2:46
can just customize it width and height I
2:49
will set it to 50/50 so these is
2:51
actually the properties of that Cropper
2:54
control that you will see whenever you
2:56
load your
2:57
image and after this you'll also have
3:00
the variables for keeping track if the
3:03
cropping is complete or not completed
3:06
crop set completed crop this will be a
3:10
Boolean parameter which will keep track
3:12
of whether the image cropping is
3:14
complete or not and then we will have
3:17
the variable for the cropped image which
3:20
we will download this
3:22
so for this we will again use the UST
3:26
State hook initial value will be n and
3:28
then we'll be having the image reference
3:31
and for this we'll be using the use ref
3:33
hook and we'll be attaching a reference
3:36
to the image so that we can keep track
3:38
of which image is
3:45
cropping and we have given the image
3:49
reference right here we are using the
3:50
use ref hook similarly we will also be
3:53
having a reference to the canvas tag as
3:55
well and for this we will have a canvas
3:58
ref again again we'll be using the US
4:01
ref hook so these are some of the
4:03
variables that we will use in this
4:04
application as we code it so now coming
4:07
back to the jsx we will just
4:10
be inside this div
4:13
tag I will just tile it with basic CSS I
4:17
will just align this interface in the
4:19
center position so text aligned will be
4:22
Center I'll just give it a little bit of
4:25
padding 20 pixel and inside this we'll
4:29
have a h to heading which will say that
4:32
react image
4:34
crop demo and after this will'll be
4:37
having this input field where we allow
4:40
the user to select the image file and we
4:42
will only be accepting images so image
4:45
star and we binding onchange event
4:48
handler so when we do select the image
4:51
we will execute this function handle
4:53
image change so this function will
4:56
execute so I will just need to Define
4:57
this function
5:02
so e parameter will automatically be
5:05
passed so we will now need to write this
5:08
function we need to read the image file
5:11
selected and for doing this we will
5:13
simply say e. target. files zero and if
5:18
the image file is valid in that case we
5:21
need to read the file and for this we'll
5:24
be using the create object URL function
5:27
and then we will set the image using the
5:31
hook and we are using this function
5:34
which is provided by UST state which is
5:38
set image so we are setting this image
5:40
in the state after we read this so now
5:43
we need to display this image so if you
5:45
refresh your browser you will see
5:47
actually this input field added choose
5:49
file button so now I need to display
5:52
this image once the image is read so now
5:55
to display it it's really easy after
5:59
this input tag we will simply have this
6:01
GSX
6:03
expression we'll have this condition
6:05
that if the image is there in that case
6:07
we need to display this and we need to
6:09
display this inside the react crop
6:12
component so this component actually
6:15
takes some options the first option it
6:18
takes is the image to crop and we pass
6:21
the
6:22
crop variable that we have declared if
6:25
you
6:25
see we have declared this object right
6:29
here so this is actually your
6:31
controls with the default options so we
6:33
are cropping this image and we also need
6:36
to pass the expect ratio of the cropping
6:39
so I will pass it as one and then we
6:42
will also be having on change event
6:44
handler so once you crop the
6:49
image we need to Simply call this set
6:52
crop function which we have declared
6:54
which is a state
6:56
variable so whatever the user crops
7:00
inside the image it will be
7:02
called so we are simply calling this
7:04
function set crop so it will update the
7:07
state simply so it also has a another
7:12
call back function on complete so this
7:15
automatically occurs when the cropping
7:17
is complete by the user so I will just
7:20
Define a call back function so it can be
7:22
anything I'm just calling it as on crop
7:25
complete I just need to Define this
7:27
function right here so on crop
7:31
complete so this function will
7:33
automatically occur once the cropping is
7:36
complete and now inside this function we
7:40
will get the cropping Dimensions so
7:42
using these Dimensions we will first of
7:44
all call the state variable set
7:46
completed crop to crop and then we will
7:50
here check that if the cropping and the
7:53
image
7:56
reference is valid then we will just
7:59
generate the cropped image so we
8:01
basically haven't given this image
8:03
reference for doing this first of all we
8:06
need to display the image so right here
8:09
inside this cropping component we will
8:11
display the image so inside the image
8:15
tag first of all we will attach the
8:17
reference
8:19
so essentially we are giving an
8:22
ID so in react CH you give it using this
8:25
hook and then the source will be the
8:28
actual image
8:30
and we'll give it a style here which
8:32
will be a maximum width
8:34
of
8:37
100% and we'll also be having on load
8:40
function so when the image is loaded
8:42
successfully we'll be executing this
8:44
function on image load so this function
8:47
will automatically get sced once you add
8:50
the image so on image
8:57
load so our code is executing
9:00
systematically so once this function
9:04
executes on image load inside this e
9:08
parameter is automatically passed so
9:10
this onload function e parameter is
9:12
automatically passed and now we need to
9:14
display the image by using the width and
9:17
the height we can easily get this
9:20
using like this the width and height of
9:23
the image by E do current
9:27
Target so in this way we can get the
9:29
dimensions of this image after we get
9:31
the dimensions we can set the crop again
9:35
and here we can use these functions
9:37
which are provided by this package which
9:39
is Center crop aspect
9:44
ratio make aspect crop and here we need
9:47
to pass this object first is actually
9:50
the unit again this is percentage and
9:53
the width which will be
9:56
50 so whatever is the width and the
9:59
height which is selected by the user in
10:02
this way you can call this very simply
10:06
you're calling these functions which are
10:07
provided by this package we are
10:09
providing the width and the
10:11
height and we are cropping the image so
10:14
if you try to refresh it and select
10:17
image file you will see the controls
10:19
will be there and you will see the image
10:22
will be you can crop any portion of this
10:25
image so now I need to display this
10:28
cropped portion automatically Ally on
10:29
the right hand side so that you can
10:31
clearly see what we are cropping so now
10:34
to display that crop portion we can add
10:37
the jsx
10:40
part so we we have this call back
10:43
function which is on crop complete so
10:46
when the cropping is complete this
10:48
function will execute which is on crop
10:51
complete so we will basically WR here
10:55
make a function right here once the
10:57
cropping is complete need to generate
11:00
the cropped image so for this we'll
11:02
write this function and pass the crop as
11:04
an arent so now inside this function
11:08
will do the heavy lifting for us which
11:10
is generate the cropped
11:14
image and here we need to actually get
11:18
the first of all the image
11:21
reference and for this gu we do need to
11:24
add a canvas tag a empty canvas tag
11:27
inside of a GSX so right
11:31
after if you see after this
11:34
image just below this image we will
11:37
actually have a download button as well
11:41
so after this image is there we have a
11:43
download button which simply says that
11:46
download the cropped image and we are
11:49
binding an on click listener to this so
11:50
we are executing this function so once
11:52
you click it your cropped image will be
11:55
downloaded so let me just Define this
11:57
function
12:00
so here the download will take place so
12:02
just after this download button just add
12:05
this empty canvas tag which is required
12:08
for this application to
12:10
keep I think this
12:13
will just after here it's a simple this
12:18
canvas tag will not be displayed display
12:20
none it is just being attached with this
12:23
reference tag we will use this canvas
12:25
tag now to actually draw the image
12:29
so right inside this generate crop
12:33
function you need to pass the canvas
12:37
reference canvas reference do
12:44
current so we have declared this if you
12:47
see I think it needs to be misspelled
12:51
canvas reference so after we get the
12:54
image in the canvas reference now we can
12:56
calculate the scaling coordinate width
12:59
and the height so if you know something
13:02
about the canvas API you will perfectly
13:06
know what we are doing right here we are
13:08
actually drawing the image on the canvas
13:12
using this draw image function we simply
13:15
calculating the width and the height of
13:17
the cropped image we are getting this
13:19
like this and then we are getting the 2D
13:21
context and then we are drawing this
13:23
image on the canvas using these
13:25
coordinates and now we can export this
13:27
image
13:29
to jpg image by getting the base 64 code
13:34
so there is a function inside the canvas
13:36
API which is two data URL this is a
13:39
JavaScript function which returns your
13:42
image as a base 64 code here we can
13:45
provide the M type and then we can set
13:48
the cropped image URL to this URL and
13:52
now once we get this inside our state we
13:55
can display it inside the jsx very
13:57
simply so right if you just go down
14:01
right
14:01
here we can have a diff section right
14:04
here where we can display the cropped
14:06
image so side by side we will display it
14:09
so we just give it a margin of 20 pixel
14:15
Z and inside this we will
14:18
display the cropped image URL
14:23
and inside this we will
14:25
[Music]
14:26
display if the cro image is available
14:29
then in that case it'll be having a
14:31
simple H3 heading which will say cropped
14:36
image
14:41
preview and after this you'll be
14:43
displaying this image very simply by
14:47
using the image tag so in this way
15:02
and then here you will have this button
15:04
so just shift
15:06
this here this button will be there to
15:10
download the cropped image so if you
15:12
just refresh now what will happen now
15:15
you will is actually crop your
15:19
image
15:20
and whatever question that you select B
15:23
64 code will be there and as you select
15:27
it will automatically update to
15:29
whichever
15:30
portion that you want to
15:34
crop so now if you click the download
15:38
cropped image we do need to download the
15:40
image as well so what I will do inside
15:44
this
15:47
function which is download cropped image
15:51
I think this is actually the function
15:53
which will be responsible for
15:55
downloading the
15:56
image so here will be simp be comparing
15:59
if the cropped image is available then
16:03
create anchor tag and then it's a simple
16:06
process of downloading an image in an
16:08
attachment so we're doing it creating an
16:11
anchor tag and then simply doing this
16:14
process so if you refresh
16:17
now select your
16:20
image whatever portion that you want to
16:23
select click on download cropped image
16:26
and you will see your image will be
16:28
cropped so in this easy way you can
16:30
integrate this package which is react
16:32
image crop inside your react CH
16:34
application I've shown you step by step
16:37
all the source code will be given in the
16:39
description of this video so thank you
16:41
very much for watching this video and do
16:43
check out my website as well free mediat
16:46
tools.com uh which contains thousands of
16:49
tools regarding audio video and image
16:51
and I will be seeing you in the next
16:53
video