angularjs crop image with example and demo

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.

View Demo Download

<link href="" rel="stylesheet" />
<script src=""></script>
<script src=""></script>
<body ng-app="imageapp" ng-controller="imageCtrl">
Select an image file for angularjs crop image: <input type="file" id="fileInputimg" />
<div class="cropAreaimg">
<img-crop image="mycropImage" result-image="myCroppedImageresult"></img-crop>
<div>angularjs crop image</div>
<img ng-src="{{myCroppedImageresult}}" />
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.mycropImage =;

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

	[result-picture size="{number}"] 
	[result-picture format="{string}"] 
	[result-picture quality="{number}"] 
	[on-stack begin="{expression"] 
	[on-stack done="{expression"] 
	[on-stack error="{expression"] 

For angularjs crop image


Assignable precise expression to information tie to. NgImgCrop gets a picture for editing from it.


Assignable rakish expression to information tie to. NgImgCrop puts an information uri of an edited picture into it.


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.


Discretionary. Sort of the harvest range. Conceivable qualities: circle|square. Default: circle.


Discretionary. Min. width/tallness of the harvest zone (in pixels). Default: 80.


Discretionary. Width/stature of the outcome picture (in pixels). Default: 200.


Discretionary. Organization of result picture. Conceivable qualities incorporate picture/jpeg, picture/png, and picture/webp. Program bolster shifts. Default: picture/png.


Discretionary. Nature of result picture. Conceivable values in the vicinity of 0.0 and 1.0 comprehensive. Default: program default.


Discretionary. Expression to assess after changing the trimmed some portion of the picture. The trimmed picture information is accessible as $dataURI.


Discretionary. Expression to assess when the source picture begins stacking.


Discretionary. Expression to assess when the source picture effectively stacked.


Discretionary. Expression to assess when the source picture didn’t stack.

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  25  =  35

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US