What is the best way to encode an image into JSON format?

Question

What is the best way to encode an image into JSON format?

let canvas = document.createElement('canvas');
let context = canvas.getContext( '2d' );
context.drawImage( video, 0, 0 );
let image_src = canvas.toDataURL('image/jpeg');
let dataURL = canvas.toDataURL("image/jpeg");
let image= dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
console.log(image);

let params = {
  // Request parameters
  "returnFaceId": "true",
  "returnFaceLandmarks": "false",
  "returnFaceAttributes": "age",
};

$.ajax({
  url: "https://westus.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
  beforeSend: function(xhrObj){
    // Request headers
    xhrObj.setRequestHeader("Content-Type","application/octet-stream");
    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","8b99a9ed839a40a08aa8b529ef0f9b8c");
  },
  type: "POST",
  // Request body
  data: [image],
})

This Javascript code captures an image and then passes it to a JSON object. However, the request always receives a response of 400. You can find more information about the Microsoft API here:

Here is a screenshot of the API documentation.

Can you provide any hints on how to properly pass the image?

https://i.sstatic.net/qVYqA.png

javascript json ajax base64

Answer 1

Answer №1

UPDATE

After spending some time experimenting with this, I discovered that the reason for the failure in your example was due to sending base64 data instead of binary data, which is required by the API. The challenge then lies in converting an image to a blob. I have created a JSFiddle with the code below that effectively generates this binary blob from a canvas loaded with an image randomly fetched from a URL. It successfully elicits a 200 response from the API. Take a look at it and feel free to ask if you have any queries:

https://jsfiddle.net/mq70h6pf/14/

function getImageBlob(url, callback) {
    var image = new Image();
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = url;
    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth;
        canvas.height = this.naturalHeight;
        canvas.getContext('2d').drawImage(this, 0, 0);
        canvas.toBlob(callback);
    };
}

var randomImageUrl = "https://unsplash.it/200/300/?random";
getImageBlob(randomImageUrl, function(imageBlob) {
    $("#displayImage").attr("src", URL.createObjectURL(imageBlob)); //Verify if blob can be displayed correctly, for reference only
    console.log(imageBlob);
    var params = {
      // Request parameters
      "returnFaceId": "true",
      "returnFaceLandmarks": "false",
      "returnFaceAttributes": "age",
    };
    $.ajax({
      url: "https://westus.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
      beforeSend: function(xhrObj){
        // Request headers
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","8b99a9ed839a40a08aa8b529ef0f9b8c");
      },
      type: "POST",
      contentType: "application/octet-stream",
      // Request body
      data: imageBlob,
      processData: false
    })
});

Answer 2

UPDATE

After spending some time experimenting with this, I discovered that the reason for the failure in your example was due to sending base64 data instead of binary data, which is required by the API. The challenge then lies in converting an image to a blob. I have created a JSFiddle with the code below that effectively generates this binary blob from a canvas loaded with an image randomly fetched from a URL. It successfully elicits a 200 response from the API. Take a look at it and feel free to ask if you have any queries:

https://jsfiddle.net/mq70h6pf/14/

function getImageBlob(url, callback) {
    var image = new Image();
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = url;
    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth;
        canvas.height = this.naturalHeight;
        canvas.getContext('2d').drawImage(this, 0, 0);
        canvas.toBlob(callback);
    };
}

var randomImageUrl = "https://unsplash.it/200/300/?random";
getImageBlob(randomImageUrl, function(imageBlob) {
    $("#displayImage").attr("src", URL.createObjectURL(imageBlob)); //Verify if blob can be displayed correctly, for reference only
    console.log(imageBlob);
    var params = {
      // Request parameters
      "returnFaceId": "true",
      "returnFaceLandmarks": "false",
      "returnFaceAttributes": "age",
    };
    $.ajax({
      url: "https://westus.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
      beforeSend: function(xhrObj){
        // Request headers
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","8b99a9ed839a40a08aa8b529ef0f9b8c");
      },
      type: "POST",
      contentType: "application/octet-stream",
      // Request body
      data: imageBlob,
      processData: false
    })
});

What is the best way to encode an image into JSON format?

Answer №1

Similar questions

The perfect method for creating template literals using a function

XMLHttpRequest Refusing to Send Data

Setting the default value for a dropdown in Angular 2 using Kendo UI

The componentDidMount function is not initializing the state

After AJAX has been loaded, Readmore.js fails to function properly

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

The Jquery append function is limited to the initial ajax request, necessitating a page refresh in order to populate another div with the desired

What is the correct method for verifying the presence of a field in JavaScript (or its frameworks)?

Is there a way to include two functions within a single ng-click event?

Incapable of retrieving data from MongoDB due to a failure in fetching results using streams in Highland.js

Rotating the camera around the origin in Three.js

Utilizing mapped data to display numerous Material-UI Dialog elements

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

Using setTimeout with jQuery.Deferred

Guide on displaying API data within nested fields in ReactJS

Issue with camera boundaries in Three.js when using EffectComposer with an orthogonal camera is currently presenting inaccuracies

How can I attach a cookie to a div that becomes visible after a few seconds of video playback?

What could be causing Django REST Framework to block non-GET requests with a 403 Forbidden error from all devices except for mine?

Ajax updates to an element are not reflected until the for loop has completed

Incorporate Web-GL sandbox effects into an HTML webpage