Microsoft Cognitive Services: Загрузка изображения

Question

Я пытаюсь загрузить изображение с помощью Microsoft Computer Vision API с мобильного устройства, но я постоянно получаю 400 Bad Request for Invalid File Format «Входные данные не являются допустимым изображением». Документации говорится, что я могу послать данные как приложения/октет потока в следующем виде:

[двоичные данные изображения]

У меня есть данные изображения с точки зрения кодирования 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}
• "данные: изображение/JPEG; base64," + base64image
• "изображение/JPEG; base64," + base64image

и многое другое.

Я проверил их на консоли API Computer Vision. Это потому, что двоичный код с кодировкой base64 не является приемлемым форматом? Или я отправляю его в неправильном формате?

Примечание: операция выполняется при отправке URL-адреса в качестве приложения/json.

Answer 1

Пожалуйста, взгляните на Emotion API Project Oxford base64 image или перейдите непосредственно к фрагменту кода здесь: How to post an image in base64 encoding via .ajax?.

Поскольку это повторяющаяся тема, я сделал запрос функции, чтобы API-интерфейсы обрабатывали URI данных напрямую, на UserVoice.

Answer 2

Просто хотел добавить это в случае, если это поможет кому угодно. Ответ, на который ссылается cthrash выше, работает отлично, но это привело меня к более простому способу, который не конвертирует изображение в base64, а затем обратно в двоичный.

Просто прочитайте изображение как ArrayBuffer и используйте его для создания нового 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); 
    }  
}