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

Question

我需要有关 HTML 画布元素的帮助。我是 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.....

我已尝试删除 data:image/png 但没有用。
我是对的 canvas.toDataURL 返回图像的 base64 编码数据的字符串形式。我可以在 html 页面上显示此图像。我也做了右键保存到本地驱动器，并用文件调用API，它可以工作。

因此，问题在于将数据从画布元素以二进制格式移动到请求正文时。

如何做到这一点？提前感谢您的帮助。

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) {...}