[英]How do you use ng-file-upload and ngImgCrop?
我想创建一个文件上传器,我可以将图片上传到我的UI,裁剪它然后发送到我的服务器。 我一直在使用ngFileUpload上传文件,它运行良好。 我按照指示将ngImgCrop添加到我的项目中,并将http://jsfiddle.net/danialfarid/xxo3sk41/590/中的html和css导入到我的项目中以找出如何使用它。 乍看之下一切看起来都不错,但是当我从硬盘驱动器中选择一张图片时,它不会出现在裁剪区域。 可能隐藏某些东西还是其他错误的东西? 这是jsfiddle html和css:
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
</style>
<div>Crop Image and Upload</div>
<button ngf-select ng-model="picFile" accept="image/*">
Select Picture</button>
<div ngf-drop ng-model="picFile" ngf-pattern="image/*"
class="cropArea">
<img-crop image="picFile | ngfDataUrl"
result-image="croppedDataUrl" ng-init="croppedDataUrl=''">
</img-crop>
</div>
<div>
<img ng-src="{{croppedDataUrl}}" />
</div>
<button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button>
我的代码只适用于上传。 图片看起来像预期的那样。 我想知道为什么它是为了一个而不是另一个。 此代码适用于ng-file-upload:
<div class="photo-upload-text">Upload your image</div>
<a class="upload-button" ngf-select ng-model="logo" href="#">Choose File </a>
<img ngf-src="logo" ngf-default-src="'/thumb.jpg'" ngf-accept="'image/*'">
最后,我列举了两个例子。 这个允许我裁剪图片,但它不会产生base64文件,没有可以轻松上传的前缀。 第二个虽然相似但没有把图片用于裁剪。
允许裁剪但不会产生可接受的base64文件
<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>
我认为这提供了一个很好的base64文件,但我不能裁剪它找出来
<div>Crop Image and Upload</div>
<button ngf-select ng-model="picFile" accept="image/*">Select Picture</button>
<div ngf-drop ng-model="picFile" ngf-pattern="image/*"class="cropArea">
<img-crop image="picFile | ngfDataUrl" result-image="croppedDataUrl" ng-init="croppedDataUrl=''"></img-crop>
</div>
<div>Cropped Image:</div>
<div>
<img ng-src="{{croppedDataUrl}}" />
</div>
乍看之下一切看起来都不错,但是当我从硬盘驱动器中选择一张图片时, 它不会出现在裁剪区域 。
当我尝试使用下面的代码重现您的问题时,一切都很完美。
angular.module('app', ['ngFileUpload', 'ngImgCrop']).controller('UploadController', function($scope) { });
.cropArea { background: #E4E4E4; overflow: hidden; width:500px; height:350px; }
<head> <link href="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.css" rel="stylesheet"/> </head> <body ng-app="app"> <div>Crop Image and Upload</div> <button ngf-select ng-model="picFile" accept="image/*"> Select Picture</button> <div ngf-drop ng-model="picFile" ngf-pattern="image/*" class="cropArea"> <img-crop image="picFile | ngfDataUrl" result-image="croppedDataUrl" ng-init="croppedDataUrl=''"> </img-crop> </div> <div> <img ng-src="{{croppedDataUrl}}" /> </div> <button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.0.4/ng-file-upload.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.js"></script> </body>
我尝试了ngImgCrop和ng-file-upload的例子,它对我来说不起作用。 我需要添加以下代码才能使其工作:
var app = angular.module('fileUpload', ['ngFileUpload', 'ngImgCrop']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.upload = function (dataUrl, name) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
file: Upload.dataUrltoBlob(dataUrl, name)
},
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
});
}, function (response) {
if (response.status > 0) $scope.errorMsg = response.status
+ ': ' + response.data;
}, function (evt) {
$scope.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}
}]);
这段代码:
$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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.