Image Crop demo

Angular Image Crop using ngImgCrop

by venkatesh pappu

HTML

<script src="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.css">
<body ng-app="app" ng-controller="Ctrl">
  <div>
      <input type="text" ng-model="myImage"/>
  </div>
  <div id = "parentdiv">
     <div class="cropArea">
      <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
     </div>
      <div>Cropped Image:</div>
      <div style="width:90%;height:40%;background:red;">
        <img ng-src="{{myCroppedImage}}" />
      </div>
    </div>
</body>

CSS

.cropArea {
  background: #E4E4E4;
  width:100%;
  height:50%;
}
#parentdiv{
  width:100%;
  height:100%;
  position:absolute;
}

JavaScript

angular.module('app', ['ngImgCrop'])
  .controller('Ctrl', function($scope, $http) {
      $scope.myImage = "https://www.nasa.gov/sites/default/files/images/WSTF1205e09200.jpg";
      $scope.myCroppedImage="";
});