Hey there, I'm looking to add an image cropper to my webpage. I came across some code on Codepen, but when I tried using it, the code didn't work and I encountered this error https://i.sstatic.net/h5F4T.png
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