angular.module('myApp', ['angularCroppie']).controller('MyCtrl', function($scope) {
$scope.cropped = {
source: 'https://raw.githubusercontent.com/Foliotek/Croppie/master/demo/demo-1.jpg'
};
// Assign blob to component when selecting a image
$('#upload').on('change', function () {
var input = this;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
// bind new Image to Component
$scope.$apply(function () {
$scope.cropped.source = e.target.result;
});
}
reader.readAsDataURL(input.files[0]);
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://rawgit.com/Foliotek/Croppie/master/croppie.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script type="text/javascript" src="//rawgit.com/Foliotek/Croppie/master/croppie.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lpsBetty/angular-croppie@master/angular-croppie.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<input type="file" id="upload" accept="image/*" />
<!-- Croppie needs a container -> using 'boundary' option -->
<croppie ng-if="cropped.source" src="cropped.source" ng-model="cropped.image" options="{boundary:{width:300,height:350}}"></croppie>
<br><br><br><br>
Cropped Image: <br>
<img ng-src="{{cropped.image}}" />
</body>
</html>