个人中心
gpt4 book ai didi

ios - Apache Cordova 错误将裁剪后的图像从 IOS 上传到服务器

转载 作者：行者123 更新时间：2023-11-29 01:18:40 26 4
gpt4 key购买 nike

在我的 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/

26 4 0
文章推荐： iOS Facebook 最新SDK无法通过原生App登陆，只能通过浏览器登陆
文章推荐： android - 在 ionic real android 设备中从本地服务器测试 REST API
文章推荐： android - 弹出窗口在沉浸模式下显示有空格/间隙，仅在 Marshmallow 上
文章推荐： android - 在 Viewholder 中分配的 Recyclerview setOnClickListner 不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com