javascript - 使用 `Status Code:400 Bad Request` 类型的数据调用 Microsoft Azure Emotion API 时获取 `Content-Type:application/octet-stream`

Question

我正在尝试将数据发送到 Microsoft Cognitive Services' Emotion API ，格式为 Content-Type: application/octet-stream。

我通过调用 canvas.toDataURL('image/jpeg', 0.1); 从 Canvas 获取图像的 Base64 字符串(我尝试使用 1, 0.5, 0.2 也是如此，只是为了检查它是否有效并停止给我错误)

然后，使用该 Base64 字符串，我调用 EmotionService 的 getUserEmotion 方法。

我按照 this answer 中提到的说明进行操作，使用 Angular 的 HttpClient 进行 AJAX 调用。我的服务如下所示:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class EmotionService {

  apiUrl: string = 'https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize';

  constructor(private http: HttpClient) {}

  getUserEmotion(userImageBlob) {
    let headers = new HttpHeaders();
    headers = headers.set('Ocp-Apim-Subscription-Key', 'my-api-key-here');
    headers = headers.set('Content-Type', 'application/octet-stream');
    return this.http.post(this.apiUrl, { "data": this.makeBlob(userImageBlob) }, { headers: headers });
  }

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

}

这是我的请求的“网络”选项卡的样子:

以下是我的问题:

1. 在我关注的 SO 答案中，他们还指定我应该为 AJAX 调用设置 processData:false 选项。但我不确定如何使用 Angular 的 HttpClient 来做到这一点。
2. 请求负载中的data字段也为空。但是当我调试时，我从 makeBlob 方法中获取了正确的 Blob 对象。为什么会发生这种情况？

Answer 1

我在这里做了一件非常愚蠢的事情。 API Documentation of the Emotion API这里说它需要作为二进制图像数据的数据。

但我仍然将其作为 JSON 提供。我只是更改了 getUserEmotion 方法的实现。而不是

return this.http.post(this.apiUrl, { "data": this.makeBlob(userImageBlob) }, { headers: headers });

我用过这个

return this.http.post(this.apiUrl, this.makeBlob(userImageBlob), { headers: headers });

希望这可以帮助遇到同样问题的人!