這期內容當中小編將會給大家帶來有關怎么在AngularJS中利用ng-Img-Crop截取頭像，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
1.安裝插件
bower install ngImgCrop
2.引入插件
<script src="ng-img-crop.js"></script> <link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="external nofollow" rel="external nofollow" >
3.添加依賴
var app = angular.module('myApp', ['ngImgCrop']);4.用法
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
5.參數
<img-crop
image="{string}" //需要截取的圖片變量名
result-image="{string}" //截取后所賦值的變量名
[change-on-fly="{boolean}"] //是否實時更新用戶截取圖像的預覽,若為否,則會等用戶停止動作后更新預覽的圖像
[area-type="{circle|square}"] //截取圖像框的形狀(圓形或正方形)
[area-min-size="{number}"] //截取圖像框的最小面積
[result-image-size="{number}"] //截取后圖像的大小
[result-image-format="{string}"] //截取后圖像的格式
[result-image-quality="{number}"] //截取后圖像的質量
[on-change="{expression}"]
[on-load-begin="{expression"]
[on-load-done="{expression"]
[on-load-error="{expression"]
></img-crop>6.Demo
<html>
<head>
<script src="angular.js"></script>
<script src="ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="external nofollow" rel="external nofollow" >
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
</style>
<script>
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);
});
</script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
<!-- 截取圖片框 -->
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
<!-- 預覽圖片框 -->
</body>
</html>上述就是小編為大家分享的怎么在AngularJS中利用ng-Img-Crop截取頭像了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
