AngularJS implements avatar intercepting example through ng-Img-Crop

I've been bored recently and wrote a practical code. AngularJS implements avatar intercepting through ng-Img-Crop and share it with everyone

1. Install the plug-in

bower install ngImgCrop

2. Introduce plug-ins

<script src=""></script>

<link rel="stylesheet" type="text/css" href="" rel="external nofollow" rel="external nofollow" >

3. Add dependencies

var app = ('myApp', ['ngImgCrop']);

4. Usage

<img-crop image="myImage" result-image="myCroppedImage"></img-crop>

5. Parameters

&lt;img-crop
  image="{string}"         //The image variable name that needs to be intercepted  result-image="{string}"     //The variable name assigned after intercepting  [change-on-fly="{boolean}"]    // Whether to update the preview of the user's image intercepted in real time? If not, the preview image will be updated after the user stops the action.  [area-type="{circle|square}"]   //Seave the shape of the image frame (circle or square)  [area-min-size="{number}"]    //The minimum area of the clipping image frame  [result-image-size="{number}"]  //The size of the image after the clipping  [result-image-format="{string}"] //The format of the image after the intercept  [result-image-quality="{number}"] //The quality of the image after the intercept  [on-change="{expression}"]    
  [on-load-begin="{expression"]
  [on-load-done="{expression"]
  [on-load-error="{expression"]
&gt;&lt;/img-crop&gt;

&lt;html&gt;
&lt;head&gt;
 &lt;script src=""&gt;&lt;/script&gt;
 &lt;script src=""&gt;&lt;/script&gt;
 &lt;link rel="stylesheet" type="text/css" href="" rel="external nofollow" rel="external nofollow" &gt;
 &lt;style&gt;
  .cropArea {
   background: #E4E4E4;
   overflow: hidden;
   width:500px;
   height:350px;
  }
 &lt;/style&gt;
 &lt;script&gt;
  ('app', ['ngImgCrop'])
   .controller('Ctrl', function($scope) {
    $='';
    $='';

    var handleFileSelect=function(evt) {
     var file=[0];
     var reader = new FileReader();
      = function (evt) {
      $scope.$apply(function($scope){
       $=;
      });
     };
     (file);
    };
    (('#fileInput')).on('change',handleFileSelect);
   });
 &lt;/script&gt;
&lt;/head&gt;
&lt;body ng-app="app" ng-controller="Ctrl"&gt;
 &lt;div&gt;Select an image file: &lt;input type="file"  /&gt;&lt;/div&gt;
 &lt;div class="cropArea"&gt;
  &lt;img-crop image="myImage" result-image="myCroppedImage"&gt;&lt;/img-crop&gt; 
  &lt;!-- Snap the picture frame --&gt;
 &lt;/div&gt;
 &lt;div&gt;Cropped Image:&lt;/div&gt;
 &lt;div&gt;&lt;img ng-src="{{myCroppedImage}}" /&gt;&lt;/div&gt;
 &lt;!-- Preview picture frame --&gt;
&lt;/body&gt;
&lt;/html&gt;

7. Official Documentation

/alexk111/ngImgCrop

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.