在我的 IOS 移动应用程序上，我正在拍照，然后从图库中选择一张照片。选择这张图片后，我使用ng-img-crop.js来裁剪该图像，并且不保存该裁剪后的图像，尝试将其上传到服务器，服务器端是 C# 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>
这是 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);
});
}
}]);
编辑 1:如何将 Access-Control-Allow-Origin 添加到我的移动应用程序？
编辑2:更改上传部分
最好的问候。
最佳答案
这个例子可能会帮助你: 检查这个 jsfiddle:[ http://jsfiddle.net/xxo3sk41/1/][1]
代码:
var app = angular.module('fileUpload', ['ngFileUpload', 'ngImgCrop']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.upload = function (dataUrl) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
file: Upload.dataUrltoBlob(dataUrl)
},
}).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);
});
}
}]);
关于ios - Apache Cordova 错误将裁剪后的图像从 IOS 上传到服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34857225/