Помощ при програмиране, отговори на въпроси / Angularjs / Как използвате ng-file-upload и ngImgCrop? - angularjs, ng-file-upload, ng-img-култура

Как използвате ng файла за качване и ngImgCrop? - angularjs, ng-file-upload, ng-img-crop

Искам да създам файл за качване на файлове, който могакачвайте снимка в моя потребителски интерфейс, изрежете го и след това го изпратете на моя сървър. Използвал съм ngFileUpload за качване на файлове и е работил добре. Добавих ngImgCrop към моя проект, както ми беше инструктирано и внесех html и css от http://jsfiddle.net/danialfarid/xxo3sk41/590/ в моя проект, за да разбера как да го използвам. Всичко изглежда добре на пръв поглед, но когато избера снимка от твърдия си диск, тя не се появява в областта на изрязване. Може ли нещо да бъде скрито или нещо друго не е наред? Ето 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="/images/{{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&nbsp;</a>
<img ngf-src="/images/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="/images/{{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="/images/{{croppedDataUrl}}" />
</div>

Отговори:

2 за отговор № 1

Всичко изглежда добре на пръв поглед, но когато избера снимка от твърдия ми диск не се появява в областта на културата.

Всичко работи перфектно, когато се опитах да възпроизведа проблема, като използвам кода по-долу.

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="/images/{{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>

1 за отговор № 2

Опитах примера на 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);