Up next in 10
Build Angular Image Cropper Web App in Browser Using ngx-image-cropper Library in TypeScript
0 views
Jun 7, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys uh welcome to this video
0:05
so in this video I will show you a
0:07
angular package which is used for image
0:09
cropping so if you want to crop your
0:12
images right in the browser itself this
0:14
is a great package and specifically
0:16
built for angular uh this is their npmjs
0:19
page you need to search for
0:22
ngx- image
0:24
cropper so this is essentially this
0:27
package
0:28
here and the command is this one npm ngx
0:32
image cropper so so in to install this
0:35
it's a very simple command here so after
0:38
you can see the weekly downloads is
0:40
162,000 so it's a pretty popular
0:43
package and uh they have a nice little
0:47
example also given right here
0:51
and this is they also have this hosted
0:55
on stagplates.com so if you go to this
0:59
they have this example
1:01
given
1:04
so okay it has various options you can
1:08
also change the aspect
1:10
ratio you can rotate the images zoom in
1:13
zoom out everything you can do so here
1:15
you will select whichever image you are
1:19
working on so let me select a
1:23
image so this is your image you have all
1:26
these controls you can zoom in zoom
1:33
out we can flip the image
1:37
vertically horizontally as well you can
1:39
see
1:42
that you can disable or enable this
1:46
controls that you want to see this is
1:49
your cropping you can crop the specific
1:52
portion of the image like this and it
1:55
will show you the live preview as soon
1:57
as you select here you'll see the live
1:59
preview is
2:01
showing so you can go to this example it
2:04
is hosted on stack blitz if you go to
2:06
their npmjs page you will find this link
2:10
so this is the full example code which
2:12
is given right here
2:16
you can even pan this image as well by
2:19
controlling the mouse here like
2:22
this you can also click it to move up
2:25
move right move left so all these
2:28
controls are there inside this
2:30
package or if you want to reset the
2:32
image there is this button so it will
2:34
reset the image
2:43
can download this image this cropped
2:47
image so you can see your image will be
2:52
saved or you can also paste a URL as
2:56
well so if you have a
2:58
URL you can paste it as well inside this
3:01
example it's a great package so now to
3:04
use this it's very easy they have given
3:07
this example
3:09
so basically you put this input type
3:12
file you bind this file change
3:16
event
3:17
so so here you can pass various options
3:20
as well right here this is various
3:23
options which are there so in the
3:25
documentation you will find out all
3:27
these options so main option is the
3:30
proper output format you can provide and
3:33
this contains readymate functions
3:36
available inside this so for the
3:38
cropping function we have image cropped
3:40
image loaded cropper ready load image so
3:44
all these functions are
3:45
there and then for showing the cropped
3:48
image we can simply show it in the image
3:50
tag so source is cropped image now this
3:53
is your typescript code so first of all
3:55
you import the package
3:58
here like this then you declare the
4:02
necessary variables right here if you
4:04
see that we have this function file
4:06
change event so where
4:09
you so we have a series of functions
4:12
here move down move left everything is
4:15
available right here flip horizontal
4:18
vertical zoom out zoom in you can even
4:21
rotate the
4:22
image so you can see it's a full example
4:25
code is given so you can actually see
4:27
how it works it's a great package when
4:30
it comes to image cropping so you
4:32
definitely install it and start using it
4:35
and also check out my website
4:37
freemediattools.com
4:39
uh which contains unlimited number of
4:41
tools regarding audio video and image
4:44
and I will be seeing you in the next
4:46
video