Angularjs Image Crop

A simply way to crop image using  Angularjs



Image Croping
Angularjs Image Crop


Angularjs Image Crop

Whenever we allowing a user upload image, it's better to provide cropping option for them.  Touch support, swipe to move and drag handle to zoom image. Output as a base64 encoded data Url
Uses HTML5 Canvas to display image in a flexible context, to allow dragging and zooming.
Angularjs

Try this following code

Style.css

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


View.html

<body ng-app="app" ng-controller="Ctrl">
  <div>Select an image file: <input type="file" id="fileInput" /></div>
  <div class="cropImage">
    <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
  </div>
  <div>Cropped Image:</div>
  <div><img ng-src="{{myCroppedImage}}" /></div>
</body>


Controller.js

angular.module('app', ['ngImgCrop'])
  .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';

    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;
        });
      };
      reader.readAsDataURL(file);
    };
    angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  });



Angularjs Image Crop Dev2Tricks 5 of 5
A simply way to crop image using  Angularjs Angularjs Image Crop Angularjs Image Crop Whenever we allowing a user upload image,...

Share this

Related Posts

Previous
Next Post »