在 Typescript 中将 base64URL 或 Blob 转换为图像 (png/jpg) 时出现问题

Question

首先，介绍一些背景信息：我目前正在开发一个个人项目并使用免费 OCR API（链接：https://ocr.space/ocrapi，向下滚动页面即可获取文档）。问题在于该 API 支持远程图像的 URL、文件（图像）或 base64Image。我正在使用 Angular/Typescript 进行开发（使用 Ionic 以实现移动兼容性）。

这是我的问题：我有一个具有以下 HTML 的camera.component：

<video #video autoplay muted playsinline class="video-stream"></video>
<canvas #canvas class="canvas-container" hidden></canvas>

<ion-button (click)="captureImage()">Capture Image</ion-button>

TS 文件（附件）包含一个服务 ocrRequestsService，其代码如下：

scanImage(imageDataUrl: any) {
  if (!imageDataUrl) {
    return throwError(() => new Error('Error: Unable to convert the image.'));
   }
   console.log(imageDataUrl);
   const data = { base64Image: imageDataUrl, apikey: environment.ocrApiKey, OCREngine: 2, scale: true, filetype: 'JPG' };

  return fetch(this.apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
    return data;
  })
  .catch((error) => {
    console.error('Error:', error);
    return error;
  });
}

blobToImage(blob: Blob) {
   return new File([blob], 'image.jpeg', { type: 'image/jpeg' });
};

问题如下：API成功从我的

scanImage

方法接收数据（所有参数都有效），但给我这个错误：

E216: Unable to detect the file extension, or the file extension is incorrect, and no 'file type' provided in request.Please provide a file with a proper content type or extension, or provide a file type in the request to manually set the file extension.

我已经尝试过使用简单的 URL、blob 和 Base64 编码。

所以，我已经尝试仅传递字符串，但它不起作用（相同的错误），尝试使用base64 url（也不起作用），还尝试使用其他格式（png）。

提前致谢！ 😉

Answer 1

根据文档：

• 您不应将数据发布为

  Content-Type: application/json

  （因此也不应将数据字符串化）。相反，您必须使用

  FormData

  正文进行 POST。我认为来自 mozilla 的 example 非常适合理解如何使用

  FormData

  API 添加

  fetch

  。
• 正如错误消息所示，您必须提供一些有关图像类型的信息。有关您拥有的两种方法，请参阅 orc 文档：相应地设置

  Content-Type

  ，或者提供额外的表单参数

  filetype

  （只需从我的链接向上滚动一点即可查看可能的值）。

如果您首先尝试了解请求的外观以及传输数据的方式，也许是有意义的。该文档为您提供了 Postman 的集合以及示例

curl

命令（同样可以由 Postman 导入）。如果您尝试一下这些，可能会有意义。