I am not understanding What went wrong in the following code, I am using MS-Cognitive Services for Face API and for that converting image into blob (Code Below)
var ab = [];
var img = new Image();
img.src = imageUri; // imageUri for FilePath
img.setAttribute('crossOrigin', 'anonymous');
var canvas = document.createElement("canvas");
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpeg");
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
var BASE64_MARKER = ';base64,';
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);
} var bb = new Blob([new Uint8Array(ab)]);
And Following Code to make an Ajax Call for Face Detection (MS-Cognitive Services)
var params = {
"returnFaceId": "true",
"returnFaceLandmarks": "false",
"returnFaceAttributes": "{string}",
};
$.ajax({
url: "https://australiaeast.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
beforeSend: function (xhrObj) {
xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "KEY_GOES_HERE");
},
type: "POST",
data: bb,
processData: false,
})
.done(function (data) {
alert("Response Done::" +data);
})
.fail(function (jqXHR, textStatus, errorThrown) {
alert(" Status:: " + jqXHR.status + " ResponseText is:: " + jqXHR.statusText + "");
});
I am getting Response as 400-Bad Request. I do not understand where I am making mistake.? BTW, the whole thing is in same function. Can anyone please help me with it? Thank You.
