你如何使用ng-file-upload和ngImgCrop？
[英]How do you use ng-file-upload and ngImgCrop?
问题描述
I want to create a file uploader that I can upload a picture to my UI, crop it and then send it to my server. 
我想创建一个文件上传器，我可以将图片上传到我的UI，裁剪它然后发送到我的服务器。 I've been using ngFileUpload to upload files and it has worked well. 我一直在使用ngFileUpload上传文件，它运行良好。 I added ngImgCrop to my project as instructed and imported the html and css from http://jsfiddle.net/danialfarid/xxo3sk41/590/ into my project to figure out how to use it. 我按照指示将ngImgCrop添加到我的项目中，并将http://jsfiddle.net/danialfarid/xxo3sk41/590/中的html和css导入到我的项目中以找出如何使用它。 Everything looks good at first glance but when I select a picture from my hard drive it does not appear in the crop area. 乍看之下一切看起来都不错，但是当我从硬盘驱动器中选择一张图片时，它不会出现在裁剪区域。 Could something be hidden or is something else wrong? 可能隐藏某些东西还是其他错误的东西？ Here is the jsfiddle html and 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>
I have code that works just for uploading. 我的代码只适用于上传。 The picture appears as expected. 图片看起来像预期的那样。 I wonder why it is for the one and not the other. 我想知道为什么它是为了一个而不是另一个。 This code works for ng-file-upload: 此代码适用于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/*'">
Finally, I laid out two examples. 最后，我列举了两个例子。 This one allows me to crop the picture but it does not produce a base64 file without a prefix that can be easily uploaded. 这个允许我裁剪图片，但它不会产生base64文件，没有可以轻松上传的前缀。 The second one though similar does not put the picture up for cropping. 第二个虽然相似但没有把图片用于裁剪。
Allows for cropping but does not produce an acceptable base64 file 允许裁剪但不会产生可接受的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>
I think this provides a good base64 file but I can't crop it to find out 我认为这提供了一个很好的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>
2 个解决方案
解决方案1
2 已采纳 2016-06-17 07:42:16
Everything looks good at first glance but when I select a picture from my hard drive it does not appear in the crop area .
Everything works perfectly when I tried reproducing your issue using your code below. 当我尝试使用下面的代码重现您的问题时，一切都很完美。
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>
解决方案2
1 2017-12-14 12:50:26
I tried the example of ngImgCrop and ng-file-upload and it did not work for me as is. 我尝试了ngImgCrop和ng-file-upload的例子，它对我来说不起作用。 I needed to add the following code to make it work: 我需要添加以下代码才能使其工作：
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);
});
}
}]);
this code: 这段代码：
$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.