将HTML canvas转换为二进制图像数据 [英] Converting HTML canvas to binary image data

问题描述

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

因此，问题在于将数据以二进制格式从canvas元素移至请求正文时.

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

这篇关于将HTML canvas转换为二进制图像数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！