Question

我想在我的第一个Cordova应用程序中使用Microsoft Cognitive Services的Face API。我已经在C＃和C＃中尝试了MS认知服务。 XAML代码，效果很好。我想在JS中使用Cognitive Services作为我的Cordova应用程序代码：

var app = {
initialize: function () {
    this.bindEvents();
},
onDeviceReady: function () {
    document.getElementById("take-picture-button").addEventListener("click", function () {
        appState.takingPicture = true;
        navigator.camera.getPicture(cameraSuccessCallback, cameraFailureCallback,
            {
                sourceType: Camera.PictureSourceType.CAMERA,
                destinationType: Camera.DestinationType.FILE_URI,
                //destinationType: Camera.DestinationType.DATA_URL,
                targetWidth: 500,
                targetHeight: 500

            }
        );
    });   }   function cameraSuccessCallback(imageUri) {

appState.takingPicture = false;
appState.imageUri = imageUri;
document.getElementById("get-picture-result").src = imageUri;

// Code for Face Detection
var params = {
    "returnFaceId": "true",
    "returnFaceLandmarks": "true",
    "returnFaceAttributes": "{string}",
};
var body = { "url" : ""+imageUri };
$.ajax({
    url: "CorrectURL/detect?" + $.param(params),
    beforeSend: function (xhrObj) {
        xhrObj.setRequestHeader("Content-Type", "application/json");
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "KEY-Value");
    },
    type: "POST",
    data: JSON.stringify(body),
})
    .done(function (data) {
        alert("success");
    })
    .fail(function () {
        alert("error");
    });

// End of Face Detection Code }

我的问题是，Ajax调用没有被执行。我在Azure门户上查了一下，我得到0个电话。有人可以帮我吗？

谢谢

Answer 1

看到你的程序似乎想要将图像文件发送到后端进行处理，但当前代码只发送 imgUri 中的图像路径。

以下是我项目中的工作代码，希望它可以帮助您： -

//从相机拍摄照片的代码位

takePhoto: function () {
                var profile = this;
                var options = {
                    quality: 90,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    allowEdit: true,
                    correctOrientation: true
                };
                $cordovaCamera.getPicture(options).then(function (imageData) {
                    var image = document.getElementById('post-img');
                    image.src = imageData;
                    profile.post.image = imageData;
                }, function (err) {
                    // error
                });
            }

//此代码位显示使用 $ cordovaFileTransfer插件

$cordovaFileTransfer.upload(config.api_url + "/user/add-post-image", filePath, options).then(function (result) {
                    var response = JSON.parse(result.response);
                    if (response.status === 0) {
                        cb("");
                    } else {
                        cb(response.data.img_path);
                    }
                }, function (err) {
                    console.log(err);
                }, function (progress) {
                    console.log(progress);
                });

基本思路是你需要发送文件而不是文件路径。所以 $ cordovaFileTransfer 插件（http://ngcordova.com/docs/plugins/fileTransfer/）可用于将文件发布到服务器。

如果您仍有任何疑问或问题，请发表评论，我会尝试更新我的答案以获得更好的解决方案。

Answer 2

您的网址和数据字段不正确。他们应该是

url: "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params)

和

data: '{"url": ' + '"' + imageUri + '"}'

以下是一个快速入门，您可以从https://docs.microsoft.com/en-us/azure/cognitive-services/face/quickstarts/javascript获取代码示例。

Ajax Call在Cordova Camera Plugin

2 个答案: