主页 / coding / 问题 / 79034386
Accepted
Florian A.
Asked: 2024-09-28 22:06:48 +0800 CST

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

  • 772

首先，介绍一下背景：我目前正在开发一个个人项目，并使用免费的 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）。

提前致谢！😉

image

1 个回答

  1. Best Answer

    根据文档：

    • 您不应该将数据作为 POST 发送Content-Type: application/json（因此也不应该将数据字符串化）。相反，您必须使用FormData正文进行 POST。我认为mozilla 的示例非常适合理解如何FormData使用fetchAPI 添加。
    • 正如错误消息所示，您必须提供一些有关图像类型的信息。请参阅orc 文档，了解您可以使用的两种方法：要么相应地设置Content-Type，要么提供额外的表单参数filetype（只需从我的链接向上滚动一点即可查看可能的值）。

    如果您首先尝试了解请求是什么样子以及存在哪些传输数据的方式，那么这也许会很有意义。该文档为您提供了 Postman 的集合以及示例curl命令（同样，这些命令可以由 Postman 导入）。如果您稍微尝试一下这些命令，可能会很有意义。

    • 0

相关问题