On my IOS mobile application I am taking picture and then select a picture from gallery. After selecting this picture I am using ng-img-crop.js to crop this image and without saving this cropped image, trying to upload it to a server, the server side is C# WCF. (In this particular example I am trying to upload local IIS) But I am getting this error:
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)
Should I save this cropped image to the gallery before uploading to the server? Is there any way to upload it without saving?
Here is my 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>
Here is the app.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);
});
}
}]);
Edit 1: How to add Access-Control-Allow-Origin to my mobile app?
Edit 2: Changed the upload section
Best Regards.
