angularjs crop image with example and demo
In this post we will show you how to angularjs crop image hear we will show you demo and code for angularjs crop image. hear we will giver you example and demo for angularjs crop image and how to implement it.
<link href="http://www.onlinecode.org/example/angularjs-crop-image/ng-img-crop.css" rel="stylesheet" /> <script src="http://www.onlinecode.org/example/angularjs-crop-image/angular.min.js"></script> <script src="http://www.onlinecode.org/example/angularjs-crop-image/ng-img-crop.js"></script>
<body ng-app="imageapp" ng-controller="imageCtrl">
<div>
Select an image file for angularjs crop image: <input type="file" id="fileInputimg" />
</div>
<div class="cropAreaimg">
<img-crop image="mycropImage" result-image="myCroppedImageresult"></img-crop>
</div>
<div>angularjs crop image</div>
<div>
<img ng-src="{{myCroppedImageresult}}" />
</div>
<script>
angular.module('imageapp', ['ngImgCrop'])
.controller('imageCtrl', function($scope) {
$scope.mycropImage =' ';
$scope.myCroppedImageresult = '';
var imagehandleFileSelect = function(evt) {
var imagefile = evt.currentTarget.files[0];
var imagereader = new FileReader();
imagereader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.mycropImage = evt.target.result;
});
};
imagereader.readAsDataURL(imagefile);
};
angular.element(document.querySelector('#fileInputimg')).on('change',imagehandleFileSelect);
});
</script>
</body>
Use for angularjs crop image
- Include the picture trim order
to the HTML record where you need to utilize a picture edit control. Take note of: a compartment, you put the mandate to, ought to have some pre-characterized estimate (outright or with respect to its parent). That is required, in light of the fact that the picture edit control fits the span of its compartment. - Tie the order to a source picture property (utilizing image=”” alternative). The order will read the picture information from that property and look for updates. The property can be a url to a picture, or an information uri.
- Tie the mandate to an outcome picture property (utilizing result-image=”” choice). On each refresh, the mandate will put the substance of the yield territory to that property in the information uri design.
- Set up the choices that sound good to your application.
Result picture for angularjs crop image
The outcome picture will dependably be a square for the both circle and square territory sorts. It’s very prescribed to store the picture as a square on your back-end, since this will empower you to effectively refresh your pics later, in the event that you choose to execute some outline changes. Demonstrating a square picture as a hover toward the front is not an issue – it is as simple as including an outskirt span style for that picture in a css.
Options for angularjs crop image
<img-edit
image="{string}"
result-image="{string}"
[change-on-fly="{boolean}"]
[area-type="{circle|square}"]
[area-min-size="{number}"]
[result-picture size="{number}"]
[result-picture format="{string}"]
[result-picture quality="{number}"]
[on-change="{expression}"]
[on-stack begin="{expression"]
[on-stack done="{expression"]
[on-stack error="{expression"]
></img-crop>For angularjs crop image
image
Assignable precise expression to information tie to. NgImgCrop gets a picture for editing from it.
result-image
Assignable rakish expression to information tie to. NgImgCrop puts an information uri of an edited picture into it.
change-on-fly
Discretionary. As a matter of course, to lessen CPU use, when a client drags/resizes the product region, the outcome picture is just refreshed after the client quits dragging/resizing. Set consistent with dependably refresh the outcome picture as the client drags/resizes the yield zone.
area-type
Discretionary. Sort of the harvest range. Conceivable qualities: circle|square. Default: circle.
area-min-size
Discretionary. Min. width/tallness of the harvest zone (in pixels). Default: 80.
result-image-size
Discretionary. Width/stature of the outcome picture (in pixels). Default: 200.
result-image-format
Discretionary. Organization of result picture. Conceivable qualities incorporate picture/jpeg, picture/png, and picture/webp. Program bolster shifts. Default: picture/png.
result-image-quality
Discretionary. Nature of result picture. Conceivable values in the vicinity of 0.0 and 1.0 comprehensive. Default: program default.
on-change
Discretionary. Expression to assess after changing the trimmed some portion of the picture. The trimmed picture information is accessible as $dataURI.
on-load-begin
Discretionary. Expression to assess when the source picture begins stacking.
on-load-done
Discretionary. Expression to assess when the source picture effectively stacked.
on-load-error
Discretionary. Expression to assess when the source picture didn’t stack.