Converting HTML canvas to binary image data

Question

I need help with HTML canvas element.I'm new to HTML.

I need to capture image from the webcam and send it to Microsoft cognitive API to find the emotions in the picture.

The API accepts image in octet-stream. The API is https://westus.dev.cognitive.microsoft.com/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa

The code is

canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
dataUrl = canvas.toDataURL("image/png");
$.ajax({
    url: apiUrl,
    beforeSend: function(xhrObj) {
        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", apiKey);
    },
    type: "POST",
    data: dataUrl,
    processData: false
}).done(function(response) { 
    ...
});

HTTP Response code is 400 and the response message is as below.

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

logging the dataUrl shows the data as

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAgAElEQVR4XqS92bOm2Vnlt7/pZGZVCU3IGkFCDhoxChDQBknQtGUBJtzd4Vvf+a7RUFklqVQC/xu.....

I have tried by removing data:image/png but no use.
I'm right canvas.toDataURL returns string form of base64 encoded data of the image. I can display this image on html page. I also did a right click saved it to local drive, and called API with file, it works.

So, the issue would be while moving the data from canvas element to the request body in binary format.

How can this be done ?. Thanks in advance for your help.

Answer 1

This might work. Try creating Blob from your dataUrl and pass it in to the ajax, as:

function createBlob(dataURL) {
  var BASE64_MARKER = ';base64,';
  if (dataURL.indexOf(BASE64_MARKER) == -1) {
    var parts = dataURL.split(',');
    var contentType = parts[0].split(':')[1];
    var raw = decodeURIComponent(parts[1]);
    return new Blob([raw], { type: contentType });
  }
  var parts = dataURL.split(BASE64_MARKER);
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;

  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], { type: contentType });
}

in ajax, pass the blobData,

...
var blobData = createBlob(dataUrl);
$.ajax({
    url : apiUrl,
    beforeSend : function(xhrObj) {
      xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
      xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", apiKey);
    },
    type : "POST",
    data : blobData,
    processData : false
}).done(function(response) {...}