javascript - 如何将图像的二进制传递给 JSON？

Question

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

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("Content-Type","application/octet-stream");
    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","8b99a9ed839a40a08aa8b529ef0f9b8c");
  },
  type: "POST",
  // Request body
  data: [image],
})

这是我捕获图像然后将其传递给 JSON 对象的 Javascript 代码，但此请求始终显示 400 的响应，这里是微软 API 的链接

https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236

这是 API 文档的屏幕截图。

给我一​​个如何传递图像的提示。

<小时/>

<小时/>

Answer 1

更新

好吧，我花了一些时间摆弄这个问题，本质上你的例子失败的原因是因为你发送的是base64数据，而api需要二进制数据。然后问题就变成了将图像转换为 blob。我为下面的代码创建了一个 jsfiddle，它可以从 Canvas 上正确创建这个二进制 blob，该 Canvas 加载了从 url 随机获取的图像。它成功收到来自 api 的 200 响应。如果您有任何疑问，请查看并告诉我:

<强> 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)); //Check to see if blob can be correctly displayed, 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
    })
});