Author: | |
---|---|
Views Total: | 14,806 views |
Official Page: | Go to website |
Last Update: | June 19, 2014 |
License: | MIT |
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 → <a ng-click="showImageCropper=true;imageCropStep=1">Crop Image</a></p> <p ng-show="imageCropResult">Wanna start over? → <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