在 JS 中使用 Cordova Camera Plugin 和 MS-Cognitive Services 进行人脸检测（Face-API 调用）答案

【问题标题】：Face Detection (Face-API call) using Cordova Camera Plugin & MS-Cognitive Services in JS在 JS 中使用 Cordova Camera Plugin 和 MS-Cognitive Services 进行人脸检测（Face-API 调用）
【发布时间】：2018-05-06 19:52:05
【问题描述】：

自从过去 2 天以来，我一直在试图找出问题所在？我正在使用 Microsoft Cognitive Services 开发用于人脸识别的 Cordova android 应用程序。为了拍摄图像，我使用了 Cordova Camera 插件和执行操作（检测面部、识别等），我使用的是 JS。我将在这篇文章中逐步解释代码。这是我的内容安全策略：

 <meta http-equiv="Content-Security-Policy" content="media-src * blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

捕捉图片显示按钮的标准HTML代码

<button id="take-picture-button">Take Picture</button>

现在让我们来看看 .js 文件代码，因为它是 Cordova 相机插件，所以我使用了一些预定义的事件：

    bindEvents: function () {
    document.addEventListener('deviceready', this.onDeviceReady, false);
    document.addEventListener('pause', this.onPause, false);
    document.addEventListener('resume', this.onResume, false);
},
 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,
                targetWidth: 500,
                targetHeight: 500
            });     });
},

然后 onPause: function(){} & onResume: function(){} 以下是我使用 MS-Cognitive 服务人脸 API 进行 ajax 调用以进行人脸检测的代码：（从 FaceAPI 文档中我了解到我可以在 POST 方法中发送二进制数据或 Blob 或文件，因此我需要转换图像转换成二进制数据）我将图像转换代码和ajax代码一起发布，以便大家理解。

  var img = new Image();
img.src = imageUri;  // System Path (eg: file:///storage/android/.......)

    var canvas = document.createElement("canvas");
    canvas.width = $(window).width();
    canvas.height = $(window).height();

    var ctx = canvas.getContext("2d");
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    }
    var dataURL = canvas.toDataURL("image/jpeg");

    var data = dataURL.split(',')[1];
    var mimeType = dataURL.split(';')[0].slice(5)
    var bytes = window.atob(data);
    var buf = new ArrayBuffer(bytes.length);
    var byteArr = new Uint8Array(buf);

    for (var i = 0; i < bytes.length; i++) {
        byteArr[i] = bytes.charCodeAt(i);
    }

var params = {
    "returnFaceId": "true",
    "returnFaceLandmarks": "false",
    "returnFaceAttributes": "age",
};

var faceIds = new Array();
$.ajax({
    url: "https://australiaeast.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
    beforeSend: function (xhrObj) {
        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "API_KEY");
    },
    type: "POST",
    data: byteArr,
    processData: false,
})
    .done(function (data) {
          for (var i = 0; i < data.length; i++) {
                faceIds.push(data.faceId);
                alert("FaceID at index"+ i+" is " + JSON.stringify(data.faceId[i]));
            }
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        alert("Failed in Face Detect, Details:  Status:: " + jqXHR.status + "  ResponseText:: " + jqXHR.statusText + "");
    });

现在，上面代码的输出是“面部检测失败，详细信息：状态：：400 ResponseText：：错误请求我不明白我需要在哪里进行更改或者我遗漏了什么？请帮忙。谢谢你

【问题讨论】：

标签： javascript ajax cordova meta-tags microsoft-cognitive

【解决方案1】：

响应中应该有一条消息告诉您出了什么问题。有几种可能的原因，如 InvalidImage、InvalidImageSize 等。有关错误代码和消息列表，请参阅文档here。

【讨论】：