Simple Image Crop directive for AngularJS. Enables to crop a circle, square or rectangle from of an image.
Test it yourself, upload or choose an image from url in our amazing Online test suite
or pick a Codepen to play around with it
Codepen: Circle + Chargement Crop
Codepen: Square + Init Url Crop + Maximum rendered image
Codepen: Rectangle Crop
Codepen: Rectangle Crop + Crop info
Codepen: Rectangle With Aspect Crop and Max Init
Codepen: Rectangle + Aspect + Array Crop
Codepen: Rectangle + CSS Crop
Codepen: Different sizes
On update 0.5.4 i have fixed resize of the circle, it's looks not perfect, but it's better then bugged we had. If you believe you can fix algorithm of the circle resize, check the line 74 of the crop-area.js
If you want to contribute, please join our gitter chat and trello board for better organisation. To join trello write reply HERE.
Download ngImgCropExtended files from GitHub
bower install ngImgCropFullExtended
npm install ng-img-crop-full-extended
meteor add correpw:ng-img-crop-full-extended
import "ng-img-crop-full-extended/compile/unminified/ng-img-crop.js";
angular.module('app', ['ngImgCrop'])
.controller(function($scope){
$scope.myImage = 'https://raw.githubusercontent.com/CrackerakiUA/ngImgCropFullExtended/master/screenshots/live.jpg';
$scope.myCroppedImage = ''; // in this variable you will have dataUrl of cropped area.
});<img-crop image="myImage" result-image="myCroppedImage"></img-crop>You can checkout all options under our wiki page
See the LICENSE file