Up next in 10
React.js react-image-crop Example to Crop,Rotate & Scale Image and Download it in TypeScript
Dec 22, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/react-js-react-image-crop-example-to-croprotate-scale-image-and-download-it-in-typescript/
Show More Show Less View Video Transcript
0:09
Uh hello friends. Today in this tutorial
0:10
I'll be showing you a very good uh
0:13
ReactJS library which allows you to
0:16
crop, rotate and uh scale images. And
0:19
after you done that you will be able to
0:22
download those images inside the
0:24
browser. So let me show you a very
0:27
simple demo of this application. So you
0:30
can uh just choose your input file and
0:35
uh you can also toggle the aspect ratio
0:37
as well. So you can just see there is a
0:41
choose file button available to you. So
0:43
with the help of this button you can uh
0:47
choose your input file whichever file
0:49
you want to scrap rot crop it. So this
0:53
is a file here. You will see that this
0:54
is the input file and you will see a
0:58
live preview as well. If you want to
1:00
crop it.
1:02
So basically if I just want to crop it,
1:05
I have these user controls. So I can
1:08
simply crop this accordingly and this
1:10
will crop it. You can see here it is
1:13
having live preview here. So these
1:16
controls are very much useful if you
1:18
want to crop your image like this. You
1:21
can see that
1:25
you can crop your image like this.
1:28
So
1:30
you can remove the unnecessary portion
1:32
from the images like this. After that
1:35
you can right click save this image on
1:37
your PC. Simply save it. So now the
1:39
image is successfully saved here. So if
1:42
you now open this image.
1:45
So this is the image which is
1:46
successfully cropped here. So in this
1:48
way guys you can simply crop images
1:50
inside your ReactJS application. So
1:53
there is a second option available which
1:55
is uh the rotate option. You can also
1:58
rotate this image like this. You can see
2:00
that how this image is rotating here.
2:03
You will see that you can also do this
2:05
also. So the image is rotated like this.
2:10
You can change the rotation angle to any
2:12
angle of your choice to let's suppose
2:14
90°.
2:15
So now this image is rotated 90°
2:19
180 like this 270
2:23
to any angle you can rotate it. So
2:26
depending upon which angle you want to
2:28
rotate it
2:32
like this. So [snorts] you can rotate it
2:35
at any angle. So you can see we have
2:37
rotated it. So now you can download this
2:41
image once you are done. So there is
2:44
also a scale option also available to
2:46
you. So simply you can scale this image
2:49
like this. So if you want to zoom in you
2:52
can if you want to zoom in at any
2:54
portion you can zoom in here like this.
2:57
Just change this value accordingly.
3:00
So
3:04
so there is
3:06
good features out there for for this
3:09
library. So if you want to use it it's a
3:11
very good library. definitely use it.
3:16
You can see that
3:23
you can also rotate it like this. After
3:26
this, simply you can
3:30
save this image. Simply save it like
3:32
this.
3:35
So the library name that we are talking
3:36
about is this library guys which is
3:38
React image crop. So this is the image
3:42
cropping tool for react and it has zero
3:45
dependencies which is the feature of
3:46
this module. It doesn't have any sort of
3:49
dependencies attached to it and uh it is
3:52
used by almost three lakh people three
3:55
lakh developers which is 3 lakh 23,588.
4:00
So this is a very popular module which
4:02
is uh the these are weekly downloads. So
4:05
this is a library that we are using
4:07
here. The command is very simple which
4:09
is npmi react image crop. So I have
4:13
given all the source code in the video
4:14
description. If you want to download all
4:16
the source code you can go to the video
4:18
description link in the video
4:21
description. This is the blog post.
4:24
So first of all hit the like button
4:26
subscribe the channel as well guys. So
4:29
uh this is the blog post. I have written
4:31
step-by-step instruction is given inside
4:33
this blog post. So definitely check out
4:36
check this out at the end of this video.
4:38
So all the source code is given and I
4:41
have shown you a complete example which
4:44
which is mentioned inside their uh
4:46
documentation.
4:48
So I will not waste your time just
4:51
showing you the code here. It's a very
4:53
lengthy code. So I will show you this
4:55
example which is hosted on code
4:57
sandbox.io.
4:59
So here you can uh host your ReactJS
5:01
applications.
5:03
So you can just see here this is the
5:07
full application here and uh
5:12
you can clone this repository. So all
5:14
these files are in Typescript. So
5:17
TypeScript is a supererset of
5:19
JavaScript. So
5:22
in the right hand side you will see this
5:24
application. So [snorts] the code is
5:26
very lengthy. So that's why I'm not
5:27
typing it in this video. So
5:32
there is input button out there. If you
5:34
select this input button, you will
5:35
select your file. Just crop it with the
5:37
user controls out there and it will live
5:40
update give you this preview and you can
5:42
save this image like this. And that's
5:45
why these has various options out there
5:48
which is you can see on change on
5:51
complete as aspect ratio as well. You
5:54
can also toggle the aspect ratio if you
5:58
toggle it off. So the aspect ratio will
6:00
not change. You can see that.
6:03
So it is not changing. So if you toggle
6:06
the uh just turn on the aspect ratio
6:09
then the aspect ratio will also change.
6:11
You will see that. So it's a very
6:14
important feature to have in any sort of
6:16
image cropper library. So whenever the
6:19
image loads you will see it is
6:21
displaying it. It is setting the crop
6:23
controls like this with using this line.
6:26
So all this code is self explanatory. So
6:30
I will urge you to clone this repository
6:33
by going to the video description link.
6:35
And when you select any sort of image
6:37
files, it is reading through file reader
6:39
API. So basically
6:41
it is reading this uh setting this to
6:43
the image source element. So it is in in
6:47
background it is using the file reader
6:49
API. So you can just see here and then
6:52
we are uh using some state variables to
6:54
maintaining the state of the application
6:57
setting the aspect ratio rotating the
6:59
image scaling the image uh cropping the
7:02
image. So all these elements are
7:05
available to you. So at the very first
7:08
you need to import this CSS version of
7:10
this library and also you need to import
7:13
this library all these functionalities
7:15
which is center crop makes expert crop
7:18
crop pixel crop. So make sure that you
7:21
do this. So I just wanted to share this
7:24
library. So it's a very awesome looking
7:27
image cropping library in ReactJS. So
7:30
definitely check it out. The size is
7:32
also very small which is 5 kilobytes.
7:35
So,
7:37
so it can crop anything not just images.
7:40
So,
7:43
so they also have their advanced tool
7:45
which is Pinto. If you just open this
7:47
tool,
7:49
so it's a powerful JavaScript image
7:52
editor that can integrates with every
7:54
stack. So, they have their paid tool as
7:57
well. So, if you want to interested in
8:00
it, you can just check it out.
8:04
So that's all guys I wanted to show
8:06
about this library. So thanks for
8:09
watching this video and I will be seeing
8:11
you in the next video.