javascript - 在 JS 中使用 Cordova 相机插件和 MS-认知服务进行人脸检测(人脸 API 调用)

Question

自从过去 2 天以来，我一直在努力弄清楚出了什么问题？我正在使用 Microsoft 认知服务开发用于人脸识别的 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 Camera 插件，所以我使用了一些预定义的事件:

    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 服务 Face 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 + "");
    });

现在，上面代码的输出是“Failed in Face Detect, Details: Status::400 ResponseText::Bad Request我不明白我需要在哪里进行更改，或者我是否遗漏了什么？请帮忙。谢谢你

Answer 1

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