A simply way to crop image using Angularjs
Angularjs Image Crop |
Angularjs Image Crop
Whenever we allowing a user upload image, it's better to provide cropping option for them. Touch support, swipe to move and drag handle to zoom image. Output as a base64 encoded data UrlUses HTML5 Canvas to display image in a flexible context, to allow dragging and zooming.
Angularjs
Try this following code
Style.css
.cropImage {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
View.html
<body ng-app="app" ng-controller="Ctrl">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropImage">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</body>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropImage">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</body>
Controller.js
angular.module('app', ['ngImgCrop'])
.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);
});
.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);
});