Croppie Angular Directive for a simple image cropping. https://lingohub.com/blog/2016/03/comparison-angularjs-directives-image-cropping-uploading/

croppieDrct.js

/**
 * Use Croppie for a simple image cropping.
 * @see  https://github.com/Foliotek/Croppie
 * @example
 *   <lh-croppie src="cropped.source" ng-model="cropped.image"></lh-croppie>
 */
angular.module('lingohubApp').directive('lhCroppie', function () {
  return {
    restrict: 'E',
    scope: {
      src: '=',
      ngModel: '='
    },
    link: function (scope, element, attrs) {
      if(!scope.src) { return; }

      var c = new Croppie(element[0], {
        viewport: {
          width: 200,
          height: 200
        },
        update: function () {
          c.result('canvas').then(function(img) {
            scope.$apply(function () {
              scope.ngModel = img;
            });
          });
        }
      });

      // bind an image to croppie
      c.bind({
        url: scope.src
      });
    }
  };
});