Gar*_*ima 3 image crop angularjs
我在角度使用ng-img-crop.在通过"bower install --save ngImgCrop"安装它并在我通过grunt命令运行它时注入依赖项后,我收到一个错误:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module ngImgCrop due to:
Error: [$injector:nomod] Module 'ngImgCrop' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
我按照https://www.npmjs.com/package/ng-img-crop中提到的步骤进行 了操作,代码如下:
home.client.view.html:
<script src="public\lib\ngImgCrop\source\js\ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="public\lib\ngImgCrop\source\scss\ng-img-crop.css">
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
</style>
<body ng-app="core" 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 src="myCroppedImage" /></div>
</body>
home.client.controller.js
angular.module('core', ['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);
});
请帮帮我.谢谢