2017-03-22 16 views
0

こんにちは、私は自分のページにイメージ・クロッパーを実装したいと思います。私はCodepen .Iからいくつかのコードが同じコードを使用しますが、コードが動作していないと、それはあなたが行っていないJavaScriptを参照する必要がenter image description here角度Js "Uncaught Error:No module:uiCropper"コンソールでエラーが発生しました

angular.module('app', ['uiCropper']) 
 
    .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); 
 
    });
.cropArea { 
 
    background: #E4E4E4; 
 
    overflow: hidden; 
 
    font-size: 0px; 
 
    line-height: 0px; 
 
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
<table ng-app="app" ng-controller="Ctrl"> 
 
    <td> 
 
    <div>Cropped Image:</div> 
 
    <div><img ng-src="{{myCroppedImage}}" /></div> 
 
    </td> 
 
    <td> 
 
    <div class="cropArea"><div ng-hide="myCroppedImage">Select an image file: <input type="file" id="fileInput" /></div>  
 
    <ui-cropper image="myImage" area-type="circle" chargement="'Loading'" result-image="myCroppedImage" canvas-scalemode="true"></ui-cropper> 
 
    </div> 
 
    </td> 
 
</table

答えて

1

、以下のエラーを示していましたあなたのコードで、

+0

ありがとうSajeetharan :)その作品:) – Pkprabu

+0

助けがあれば答えとしてマークしてください – Sajeetharan

0

これは、index.htmlにuiCropper jsファイルを挿入していないためです。 index.htmlにuiCropper jsを含める必要があります。このファイルをindex.htmlに追加してチェックしてください。

関連する問題