Image Crop demo 2 time

Angular Image Crop using ngImgCrop

by manoj

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>Select an image file #1: <input type="file" id="fileInput1" /></div>
  <div class="cropArea">
    <img-crop image="myImage1" result-image="myCroppedImage1"></img-crop>
  </div>
  <div>Cropped Image #1:</div>
  <div><img ng-src="{{myCroppedImage1}}" /></div>

  <div>Select an image file #2: <input type="file" id="fileInput2" /></div>
  <div class="cropArea">
    <img-crop image="myImage2" result-image="myCroppedImage2"></img-crop>
  </div>
  <div>Cropped Image #2:</div>
  <div><img ng-src="{{myCroppedImage2}}" /></div>

</body>

CSS

.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  width:500px;
  height:350px;
}

JavaScript

angular.module('app', ['ngImgCrop'])
  .controller('Ctrl', function($scope) {
    $scope.myImage1='';
    $scope.myCroppedImage1='';
    $scope.myImage2='';
    $scope.myCroppedImage2='';

    var handleFileSelect=function(evt, idx) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope['myImage'+idx]=evt.target.result;
        });
      };
      reader.readAsDataURL(file);
    };
      angular.element(document.querySelector('#fileInput1')).on('change',function(e){handleFileSelect(e,1);});
      angular.element(document.querySelector('#fileInput2')).on('change',function(e){handleFileSelect(e,2);});
  });