Easy Image Cropping Component with Angular Image Crop

Preview:

Description:

An AngularJS directive created by andyshora that allows you to resize, zoom and crop a local image and then output a Base64-encoded data uri which represents the cropped image. All the options/parameters can be passed via HTML5 data-* attributes.

How to use it:

Include the requird Angular.js from a CDN into your document.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>

Include the image-crop-styles.css to style the image cropping component.

<link rel="stylesheet" href="image-crop-styles.css"

Include the image crop directive.

<script src="image-crop.js"></script>

Create the Html for the image cropping component.

<div ng-controller="MainController">
  <p ng-hide="imageCropResult||imageCropStep!=1">Let's get started &rarr; <a ng-click="showImageCropper=true;imageCropStep=1">Crop Image</a></p>
  <p ng-show="imageCropResult">Wanna start over? &rarr; <a ng-click="imageCropResult=null;imageCropStep=1">Reset</a></p>
  <image-crop
         data-width="300"
         data-height="300"
         data-shape="circle"
         data-step="imageCropStep"
         data-result="imageCropResult"
         ng-show="showImageCropper"
       ></image-crop>
  <hr>
  <h2>Result</h2>
  <div ng-show="imageCropResult"> <img ng-src="{{ imageCropResult }}" alt="The Cropped Image">
    <textarea class="result-datauri">{{ imageCropResult }}</textarea>
  </div>
  <p ng-hide="imageCropResult">Not cropped yet</p>
</div>

The Javascript.

<script>
var myApp = null;
(function() {
angular.module('myApp', ['ImageCropper'])
.controller('MainController', function($scope) {
console.log('MainController');
$scope.imageCropResult = null;
$scope.showImageCropper = false;
$scope.$watch('imageCropResult', function(newVal) {
if (newVal) {
console.log('imageCropResult', newVal);
}
});
});
})();
</script>

Options/parameters.

• data-width=”300″ : the width of the cropper
• data-height=”300″ : the height of the cropper
• data-shape=”circle” : the cropping guideline shape (circle/square)
• data-step=”imageCropStep” : the variable which dictates which step the user will see (used for resetting purposes)
• data-result=”imageCropResult” : the variable which will have the resulting data uri bound to it