angular-img-cropper
Version:
Client side image cropper directive for AngularJS (rectangular area, aspect ratio, multi-touch)
19 lines • 910 B
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="app.js"></script>
<script src="angular-img-cropper.js"></script>
<script src="cropper-controller.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ImageCropperCtrl as ctrl">
<input type="file" img-cropper-fileread image="cropper.sourceImage" />
<div>
<canvas width="500" height="300" id="canvas" image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage" crop-width="400" crop-height="200" min-width="100" min-height="50" keep-aspect="true" crop-area-bounds="bounds"></canvas>
</div>
<div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div>
<div ng-show="cropper.croppedImage!=null"><img ng-src="{{cropper.croppedImage}}" /></div>
</div>
</body>
</html>