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="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

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.