2

モバイル デバイスから Microsoft Computer Vision API に画像をアップロードしようとしていますが、「入力データは有効な画像ではありません」という無効なファイル形式に対する 400 Bad Request を常に受信しています。ドキュメントには、データを application/octet-stream として次の形式で送信できると記載されています。

【二値画像データ】

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");
    });
});

私は次のことを試しました：

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

もっと。

これらを Computer Vision API コンソールでテストしました。base64 でエンコードされたバイナリが許容される形式ではないためですか? または、完全に間違った形式で送信していますか?

注: この操作は、URL を application/json として送信するときに機能します。

4

2 に答える 2

3

Emotion API Project Oxford base64 imageを参照するか、コード スニペットに直接アクセスしてください: How to post an image in base64 encoding via .ajax? .

これは繰り返し発生するトピックであるため、API がデータ URI を直接処理する機能をUserVoiceでリクエストしました。

于 2016-06-18T22:28:19.587 に答える
1

他の誰かに役立つ場合に備えて、これを追加したかっただけです。上記の cthrash で参照されている答えは正常に機能しますが、画像をbase64に変換してからバイナリに戻さない、より簡単な方法につながります。

画像を A​​rrayBuffer として読み取り、それを使用して投稿の本文用に新しい 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);
    }    
}
于 2017-04-26T12:12:22.550 に答える