Microsoft 认知服务：上传图像

Question

我正在尝试从移动设备将图像上传到 Microsoft Computer Vision API，但我不断收到无效文件格式的 400 错误请求 "Input data is not a valid image"。文档指出我可以按以下形式将数据作为 application/octet-stream 发送：

[Binary image data]

我有 base64 编码的图像数据（“/9j/4AAQSkZJ........”），我也有图像 FILE_URI，但我似乎无法弄清楚发送数据的格式。这是一个示例代码：

$(function() {
    $.ajax({
        url: "https://api.projectoxford.ai/vision/v1.0/describe",
        beforeSend: function (xhrObj) {
            // Request headers
            xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", computerVisionKey);
        },
        type: "POST",
        // Request body
        data: base64image,
        processData: false        
    })
    .done(function(data) {
      alert("success");
    })
    .fail(function(error) {
      alert("fail");
    });
});

我试过以下方法：

[base64image]
{base64image}
"data:image/jpeg;base64," + base64image
"image/jpeg;base64," + base64image

等等。

我确实在 Computer Vision API 控制台上测试了这些。是因为 base64 编码的二进制文件不是可接受的格式吗？还是我发送的格式完全不正确？

注意：将 URL 发送为 application/json 时操作有效。

Answer 1

请看, or go directly to the code snippet here: .

由于这是一个反复出现的主题，我在 UserVoice.

上提出了一个功能请求，让 API 直接处理数据 URI

Answer 2

只是想添加这个以防它对其他人有帮助。上面 cthrash 引用的答案工作正常，但它引导我找到一种更简单的方法，即不将图像转换为 base64，然后再转换回二进制。

只需将图像读取为 ArrayBuffer 并使用它为 post 的主体构造一个新的 Blob。另外，不要忘记将 processData 设置为 false。完整的解决方案如下所示：

//onChange event handler for file input
function fileInputOnChange(evt) {
    var imageFile = evt.target.files[0];     
    var reader = new FileReader();
    var fileType;

    //wire up the listener for the async 'loadend' event
    reader.addEventListener('loadend', function () {

        //get the result of the async readAsArrayBuffer call
        var fileContentArrayBuffer = reader.result;

            //now that we've read the file, make the ajax call
            $.ajax({
                url: "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect",
                beforeSend: function (xhrObj) {
                    // Request headers
                    xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "<your subscription key goes here>");
                },
                type: "POST",

                //don't forget this!
                processData: false,

                //NOTE: the fileContentArrayBuffer is the single element 
                //IN AN ARRAY passed to the constructor!
                data: new Blob([fileContentArrayBuffer], { type: fileType })
            })
            .done(function (data) {
                console.log(data)
            })
            .fail(function (err) {
                console.log(err)
            });

    });
    if (imageFile) {
        //save the mime type of the file
        fileType = imageFile.type;

        //read the file asynchronously
        reader.readAsArrayBuffer(imageFile);
    }    
}

Microsoft 认知服务：上传图像

Microsoft Cognitive Services: Uploading image

mobile

image

microsoft-cognitive