Emotion API Project Oxford base64 image

Question

I am trying to make a call to the Emotion Api via JavaScript with in a PhoneGap app. I encoded the image into base64 and verified that the data can be decoded by one of the online tools. this is the code that i found on the web to use.

var apiKey = "e371fd4333ccad2"; //(you can get a free key on site this is modified for here)

//apiUrl: The base URL for the API. Find out what this is for other APIs via the API documentation var apiUrl = "https://api.projectoxford.ai/emotion/v1.0/recognize";

"file" is the base64 string.

  function CallAPI(file, apiUrl, apiKey)
    {



      //  console.log("file=> " +file);

      $.ajax({
           url: apiUrl,
           beforeSend: function (xhrObj) {
           xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
           xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", apiKey);
           },
           type: "POST",
           data: file,
           processData: false
           })
    .done(function (response) {
          console.log("in call api a");
          ProcessResult(response);
          })
    .fail(function (error) {
          console.log(error.getAllResponseHeaders())

          });
  }

   function ProcessResult(response)
   {
    console.log("in processrult");
    var data = JSON.stringify(response);
    console.log(data);

   }

I got back this:

Expires: -1

Access-Control-Allow-Origin: *

Pragma: no-cache

Cache-Control: no-cache

Content-Length: 60

Date: Fri, 01 Apr 2016 13:34:32 GMT

Content-Type: application/json; charset=utf-8

X-Powered-By: ASP.NET

So i tried their console test page. https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa/console

I can put in an image like your "example.com/man.jpg" and it works great. but if i take the same image and have it encoded as a base 64 image all i get is "Bad Body" i have tried it both as content type "application/octet-stream" and "application/json" and get the same error. sample of the encoded looks like..and http request

POST https://api.projectoxford.ai/emotion/v1.0/recognize HTTP/1.1 Content-Type: application/octet-stream Host: api.projectoxford.ai Ocp-Apim-Subscription-Key: •••••••••••••••••••••••••••••••• Content-Length: 129420

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/...

i get back:

Pragma: no-cache Cache-Control: no-cache Date: Fri, 01 Apr 2016 16:23:09 GMT X-Powered-By: ASP.NET Content-Length: 60 Content-Type: application/json; charset=utf-8 Expires: -1

{ "error": { "code": "BadBody", "message": "Invalid face image." } }

I am now not sure if you can send an image like this or not from Javascript. Can anyone tell me if my javascript is correct or if they can send an encoded base64 string image to the site.

thanks for your help tim

Answer 1

This API does not accept data URIs for images. What you'll need to do is convert it to a binary blob. Though this answer is for a different Project Oxford API, you can apply the same technique.