Question

我需要HTML canvas元素的帮助。我是HTML新手。

我需要从网络摄像头捕获图像并将其发送到Microsoft认知API以查找图片中的情感。

API接受八位字节流中的图像。 API为https://westus.dev.cognitive.microsoft.com/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa

代码是

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响应代码为400，响应消息如下所示。

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

记录dataUrl将数据显示为

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

我尝试删除数据：image / png但没有用。
我正确的canvas.toDataURL返回图像的base64编码数据的字符串形式。我可以在html页面上显示这个图像。我也右键单击将其保存到本地驱动器，并使用文件调用API，它可以工作。

因此，问题在于将数据从canvas元素以二进制格式移动到请求主体。

如何做到这一点？在此先感谢您的帮助。

Answer 1

这可能有用。尝试从dataUrl创建Blob并将其传递给ajax，如下所示：

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 });
}

在ajax中，传递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) {...}

将HTML画布转换为二进制图像数据

1 个答案: