Image Crop (with thumbnail)

Angular Image Crop using ngImgCrop

by Nivaldo

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: <input type="file" id="fileInput" /></div>
  <div class="cropArea">
      <img-crop image="myImage" result-image="myCroppedImage" on-change="onChange($dataURI)"></img-crop>
  </div>
  <div ng-show="crop">Profile Image:</div>
  <div><img ng-src="{{myCroppedImage}}" /></div>
  <div ng-show="crop">Thumbnail Image:</div>
  <div><img ng-src="{{myThumbnailImage}}" /></div>
</body>

CSS

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

JavaScript

angular.module('app', ['ngImgCrop'])
  .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';
    $scope.myThumbnailImage ='';
    $scope.crop = false;
      
    //var imgScope = angular.element('img-crop').scope();

    var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope.myImage=evt.target.result;
          $scope.crop = true;
        });
      };
      reader.readAsDataURL(file);
    };
      
    $scope.onChange = function(evt) {
        function reSize(img) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');     
            canvas.width = 100
            canvas.height = 100
            ctx.drawImage(img, 0, 0, 100, 100);
            return canvas.toDataURL();
        }
        
        var image = new Image();
        image.src = evt;
        $scope.myThumbnailImage = reSize(image);
    };
    angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  });