Pomoc w programowaniu, odpowiedzi na pytania / Angularjs / W jaki sposób korzystasz z przesyłania plików w formacie ng i ngImgCrop? - angularjs, ładowanie plików za pomocą ng, ng-img-crop

W jaki sposób korzystasz z funkcji przesyłania plików Ng i ngImgCrop? - angularjs, ładowanie plików za pomocą ng, ng-img-crop

Chcę utworzyć narzędzie do przesyłania plików, które mogęprześlij zdjęcie do mojego interfejsu użytkownika, przytnij go, a następnie wyślij na mój serwer. Używałem ngFileUpload do przesyłania plików i działało dobrze. Dodałem ngImgCrop do mojego projektu zgodnie z instrukcją i zaimportowałem html i css z http://jsfiddle.net/danialfarid/xxo3sk41/590/ do mojego projektu, aby dowiedzieć się, jak z niego korzystać. Na pierwszy rzut oka wszystko wygląda dobrze, ale gdy wybieram zdjęcie z dysku twardego, nie pojawia się ono w obszarze przycinania. Czy coś może być ukryte, czy coś jest nie tak? Oto jsfiddle html i 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>

Mam kod, który działa tylko do przesyłania. Obraz pojawia się zgodnie z oczekiwaniami. Zastanawiam się, dlaczego jest to dla jednego, a nie dla drugiego. Ten kod działa w przypadku przesyłania plików na Ng:

<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/*"">

Na koniec przedstawiłem dwa przykłady. Ta pozwala mi przyciąć obrazek, ale nie tworzy pliku base64 bez prefiksu, który można łatwo załadować. Drugi jednak podobny nie wystawia obrazu na kadrowanie.

Pozwala na kadrowanie, ale nie tworzy akceptowalnego pliku 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>

Myślę, że zapewnia to dobry plik base64, ale nie mogę go przyciąć, aby się przekonać

<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>

Odpowiedzi:

2 dla odpowiedzi № 1

Wszystko na pierwszy rzut oka wygląda dobrze, ale kiedy wybieram zdjęcie z mój twardy dysk nie pojawia się w obszarze przycinania.

Wszystko działa idealnie, gdy próbuję odtworzyć problem za pomocą poniższego kodu.

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 dla odpowiedzi nr 2

Próbowałem na przykład ngImgCrop i przesyłanie plików ng i nie działało na mnie tak jak jest. Aby to działało, musiałem dodać następujący kod:

    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);
});
}
}]);

ten kod:

                $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);