В моем мобильном приложении IOS я делаю снимок, а затем выбираю изображение из галереи. После выбора этого изображения я использую ng-img-crop.js, чтобы обрезать это изображение и без сохранения этого обрезанного изображения, пытаюсь загрузить его на сервер, на стороне сервера является С#WCF. (В этом конкретном примере я пытаюсь загрузить локальный IIS) Но я получаю эту ошибку:
ERROR: {"code":1,"source":"data:image/png;base64,iVBORw0KGgoAAAANSUhE...","target":"http://11.111.11.111/wcf/OCRService.svc/upload","http_status":null,"body":null,"exception":null}
app.js (76,24)
Должен ли я сохранить это обрезанное изображение в галерее перед загрузкой на сервер? Есть ли способ загрузить его без сохранения?
Вот мой HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="connect-src 'self' http://11.111.11.111/wcf/OCRService.svc/upload 'unsafe-eval' 'unsafe-inline'; default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<title>LoTTo</title>-->
<!-- LoTTo references -->
<link href="css/ionicons.css" rel="stylesheet" />
<link href="css/ionic.css" rel="stylesheet" />
<link href="css/ng-img-crop.css" rel="stylesheet" />
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="scripts/angular.min.js"></script>
<script src="scripts/ionic.bundle.js"></script>
<script src="scripts/ng-cordova.min.js"></script>
<script src="scripts/ng-img-crop.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/ng-file-upload-shim.min.js"></script>
<script src="scripts/ng-file-upload.min.js"></script>
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width: 300px;
height: 300px;
}
.croppedArea {
background: #E4E4E4;
overflow: hidden;
width: 300px;
}
</style>
</head>
<body ng-app="starter">
<ion-header-bar class="bar bar-header bar-light">
<h1 class="title">LoTTo</h1>
</ion-header-bar>
<ion-content ng-controller="ExampleController" padding="true">
<button class="button button-full button-balanced icon-right ion-ios-camera" ng-click="takePhoto()">
Resim Çek
</button>
<button class="button button-full button-balanced icon-right ion-images" ng-click="choosePhoto()">
Resim Seç
</button>
<center>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage" chargement="'Loading'"
area-type="rectangle"
area-min-size="50"
result-image-format="image/jpeg"
result-image-quality="1"
result-image-size="{w:300, h:50}"></img-crop>
</div>
<div ng-show="myImage !== undefined">Gönderilecek Resim:</div>
<div class="croppedArea"><img ng-src="{{myCroppedImage}}" ng-show="myImage !== undefined" id="image" /></div>
</center>
<button class="button button-full button-balanced icon-right ion-images" ng-click="upload(myCroppedImage);" ng-if="myImage !== undefined">
Resim Yükle
</button>
</ion-content>
</body>
</html>
Вот приложение.js:
angular.module('starter', ['ionic', 'ngCordova', 'ngImgCrop', 'ngFileUpload'])
.controller("ExampleController", ['$scope', '$cordovaCamera', 'Upload', '$timeout', '$cordovaFileTransfer', function ($scope, $cordovaCamera, Upload, $timeout, $cordovaFileTransfer) {
$scope.takePhoto = function () {
var options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function (err) {
console.log(err);
alert(err);
});
}
$scope.choosePhoto = function () {
var options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
$scope.myImage = $scope.imgURI;
}, function (err) {
console.log(err);
alert(err);
});
}
$scope.myCroppedImage = '';
$scope.upload = function (dataUrl) {
Upload.upload({
url: 'http://192.168.1.20/wcf/upload',
data: {
file: Upload.dataUrltoBlob(dataUrl)
},
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
console.log(response.data);
alert(response.data);
});
console.log(response.data);
}, function (response) {
if (response.status > 0) $scope.errorMsg = response.status
+ ': ' + response.data;
alert(response.status);
});
}
}]);
Изменить 1. Как добавить Access-Control-Allow-Origin в мое мобильное приложение?
Изменить 2: изменен раздел загрузки
С уважением.
