An awesome plugin build by alex. In this fork we have rectangle enable along with square and circle working correctly. Also supporting fixed aspect ratio for rectangle type.
A Pen by Honchar Denys on CodePen.
<table ng-app="app" ng-controller="Ctrl"> | |
<td> | |
<div>Select an image file: <input type="file" id="fileInput" /></div> | |
<div class="cropArea"> | |
<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true"></ui-cropper> | |
</div> | |
</td> | |
<td> | |
<div>Cropped Image:</div> | |
<div><img ng-src="{{myCroppedImage}}" /></div> | |
</td> | |
</table> |
An awesome plugin build by alex. In this fork we have rectangle enable along with square and circle working correctly. Also supporting fixed aspect ratio for rectangle type.
A Pen by Honchar Denys on CodePen.
angular.module('app', ['uiCropper']) | |
.controller('Ctrl', function($scope) { | |
$scope.myImage=''; | |
$scope.myCroppedImage=''; | |
var handleFileSelect=function(evt) { | |
var file=evt.currentTarget.files[0]; | |
var reader = new FileReader(); | |
reader.onload = function (evt) { | |
$scope.$apply(function($scope){ | |
$scope.myImage=evt.target.result; | |
}); | |
}; | |
reader.readAsDataURL(file); | |
}; | |
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect); | |
}); |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> | |
<script src="https://rawgit.com/CrackerakiUA/ui-cropper/master/compile/unminified/ui-cropper.js"></script> |
.cropArea { | |
background: #E4E4E4; | |
overflow: hidden; | |
width:500px; | |
height:350px; | |
} |
<link href="https://cdn.rawgit.com/CrackerakiUA/ui-cropper/master/compile/minified/ui-cropper.css" rel="stylesheet" /> |