Допомога у програмуванні, відповіді на питання / Анггуляр / Як використовувати ng-file-upload і ngImgCrop? - angularjs, ng-file-upload, ng-img-crop

Як ви використовуєте ng-file-upload і 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-файлів:

<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, але я не можу "t культур його, щоб дізнатися

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