In this post you will learn about cropping images using Image Crop directive in AngularJS. This directive provides you the feature to crop any image in a circle or square shape.
You just need to have angularjs to use this directive. To start with this you have to install ngImgCrop files from github.
Then you should add the following files in your code:
 

<script src="angular.js"></script>
<script src="ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="ng-img-crop.css">

After adding files add dependency of image crop module in your application module.

var myAppModule = angular.module('MyApp', ['ngImgCrop']);

Using the directive: follow these steps to use this directive:

1. Add <img-crop> directive to the html file wherever you want to use it.
2. Add the source image property to that directive i.e. image.  This can be a source url to that image.
3. Add the result image property to the directive i.e. result-image.

  There are also some other options which you can set according to your requirement:

<img-crop
    image="{string}"  // get the image for cropping.
    result-image="{string}"  // puts a data uri of cropped image into it.
   [change-on-fly="{boolean}"]  // to update the result image when user resizes it.
   [area-type="{circle|square}"]  //  type of crop area: circle or square.
   [area-min-size="{number}"]  //  minimum width or height of the crop area.
   [result-image-size="{number}"]  //  width or height of the result image.
   [result-image-format="{string}"]  //  format of result image: jpeg,png,web.
   [result-image-quality="{number}"]  //  quality of result image between 0.0 to 1.0.
   [on-change="{expression}"]  //  when changing the cropped part of image.
   [on-load-begin="{expression"]  //  when source image loads.
   [on-load-done="{expression"]  //  when source image has been loaded.
   [on-load-error="{expression"]  // when source image did not load.
></img-crop>

You can check the example here: http://plnkr.co/edit/3fXAyA1zYJnGi2FPkRmC?p=preview