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

2022-01-17 00:00:00 javascript html5-canvas

我需要有关 HTML 画布元素的帮助.我是 HTML 新手.

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

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

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

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

The API accepts image in octet-stream. The API is 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，响应信息如下.

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

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

记录 dataUrl 将数据显示为

logging the dataUrl shows the data as

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

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

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.

推荐答案

这可能行得通.尝试从您的 dataUrl 创建 Blob 和将其传递给ajax，如:

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

在ajax中，传递blobData，

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

相关文章