Up next in 10
Build a React.js Image Cropper Editor With Live Preview Using react-easy-crop in Browser Using JSX
Jun 3, 2025
Get the full source code of application here:
https://codingshiksha.com/react/build-a-react-js-image-cropper-editor-with-live-preview-using-react-easy-crop-in-browser-using-jsx/
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 uh welcome to this video
0:02
so in this video I will show you uh how
0:05
I built this ReactJS image cropper kind
0:07
of an application i'm running it inside
0:10
local host uh we have a simple user
0:13
interface where we allow the user to
0:15
simply select a image file that they
0:18
want to crop so as soon as you select
0:21
the image you will be able to zoom on a
0:24
particular section or just select it
0:26
using your mouse just move it and
0:30
whichever portion you want to do it you
0:32
can also use the scroll here you can
0:34
even rotate your
0:36
image at any angle zoom in and then just
0:41
simply click the crop button so as soon
0:43
as you will crop the button you will see
0:45
the image will be cropped with live
0:47
preview and now we have the download
0:50
button to download the cropped image so
0:53
in this easy way uh this is actually a
0:55
react image cropper a single page
0:57
application you simply select whichever
1:00
image that you want to crop you simply
1:04
select the portion you can zoom
1:07
in you can even
1:09
rotate and then click
1:14
crop so I will show you in this video
1:17
how I built this application so for
1:20
building this application we have used a
1:23
open-source package of ReactJS
1:25
specifically built for cropping image
1:28
the name of the package is React image
1:30
cropper uh this is the name of the uh
1:34
library and we are using
1:37
this
1:40
package sorry not this one which is
1:43
React easy
1:46
crop react easy crop this is actually
1:48
the name of the library it's a very
1:52
famous package of ReactJS to crop images
1:57
it's almost got for
1:59
477,000 weekly downloads so simple
2:03
command simply install this and now let
2:06
me show you how to code this
2:16
so so first of all we start this
2:19
application by simply making a
2:22
functional component and
2:25
uh then we actually import this
2:33
package by
2:35
using the import line right at the very
2:39
top
2:42
so we say
2:45
import
2:46
cropper which will be coming from this
2:49
package here so simply import this
2:51
package first of all and then right here
2:54
we need to declare some state variables
2:56
for our
2:58
project first of all for
3:03
the input image so we are using this
3:07
ustate
3:10
hook initial value will be
3:16
empty then we have the crop here x
3:20
coordinate ycoordinate will be
3:27
zero then the zoom level which initial
3:30
value will be one rotation initial angle
3:33
will be zero cropped pixels use state
3:37
null so to actually store the
3:40
cropping image then we have a variable
3:44
for storing the cropped image if any
3:46
sort of error take place we have a
3:48
variable for that as well and then
3:50
lastly the file input
3:52
reference these are all the variables
3:54
which are needed for this application
3:56
and now we come actually to the
3:59
JSX and for building this we are using
4:02
some Tailwind CSS so I've already
4:04
included the CDN for Tailwind CSS so
4:07
simply include
4:10
this
4:12
and all the source code of this
4:14
application will be given in the
4:16
description of this video so right
4:20
here we will have this condition right
4:24
here if the image
4:28
and cropped image is not there in that
4:31
case we need to show
4:36
a section to the user uh where we will
4:52
yeah I think we need to show
5:03
so right here uh we
5:15
will first of all you will be doing this
5:29
so we will be having this input field
5:31
where we allow the user to simply
5:41
select we need to close
5:50
this let me just paste it and explain to
5:53
you what is happening
6:14
so this is actually if you
6:20
see inside your Tailwind CSS we have
6:24
this input field input type file
6:26
and we are binding this on file change
6:28
function as soon as you select a image
6:31
file from your computer this function
6:33
will
6:34
execute so we actually defined this
6:38
function if you see on file
6:42
change so right here we actually are
6:45
reading the file here by using the file
6:47
reader API and loading this image
6:51
setting this image right
6:52
here and then we are calling this set
6:55
cropped image
7:15
function so we simply see this input
7:17
file
7:19
button then
7:21
we simply select and if you see we can
7:25
zoom change
7:32
it
7:34
so we actually binded this download
7:37
cropped image button so as soon as you
7:39
click this button this function
7:42
executes so inside this function we
7:45
actually creating an anchor tag we are
7:47
downloading this image as an attachment
7:49
very simple
7:53
stuff and for selecting a new image we
7:56
are basically uh doing this setting the
8:00
crop to 0
8:02
0 and this is actually the main function
8:05
get cropped image so we are passing the
8:07
input image the pixel rotation all these
8:10
angles then we are using the canvas
8:12
drawing the image on the canvas here and
8:15
then you can see we are using the draw
8:18
image function to draw the image on the
8:20
canvas getting the image data and then
8:24
we are returning the canvas to data
8:28
URL like this so this is the main
8:31
function for cropping the
8:36
image and for doing this if you
8:42
see so this is actually the full code
8:44
guys if you see we are using this
8:46
package at the very top which is
8:51
cropper so this component allows us to
8:55
show the live preview so this is
8:56
actually the component here cropper it
8:59
takes the input image then the actual
9:02
cropping then the zoom level aspect
9:04
ratio
9:05
4x3 you can even change this aspect
9:08
ratio to any aspect ratio and then we
9:10
have a set of callback functions that
9:12
you see this library supports on crop
9:15
change so this executes whenever you're
9:19
done with your cropping on crop complete
9:22
executes when the cropping is complete
9:25
and then on zoom change set zoom and
9:28
then we also pass in the rotation angle
9:30
so these functions execute so once you
9:33
select your input file here so as soon
9:36
you are cropping your image adjusting
9:39
the controls so when whenever you are
9:41
done you click this button crop image so
9:44
this call back function will execute on
9:46
crop complete so we defined all these
9:49
functions if you check set crop
9:55
function on crop complete so on crop
9:59
complete executes and set cropped area
10:01
pixels
10:06
so we're setting
10:11
this so this is the entire application
10:14
guys uh the link is given in the
10:16
description and you can get the full
10:17
source code and we have built it uh
10:21
react easy crop this is a package we
10:23
have used it and also check out my
10:25
website freemediatools.com which
10:28
contains thousands of tools regarding
10:30
audio video and image
#Online Media
#Programming