Problem converting base64URL or Blob to image (png/jpg) in Typescript

First, a bit of context: I'm currently developing a personal project and using the Free OCR API (link: https://ocr.space/ocrapi, the documentation is available by scrolling down the page). The problem is that this API supports either a URL of a remote image, a file (image), or a base64Image. I'm developing in Angular/Typescript (with Ionic for mobile compatibility).

Here’s my issue: I have a camera.component with the following HTML:

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

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

The TS file (attached) includes a service ocrRequestsService with the following code:

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

The problem is as follows: the API successfully receives data from my scanImage method (all arguments are valid), but gives me this error: 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.

I’ve already tried with a simple URL, a blob, and with Base64 encoding.

So, I already tried passing only the string but it doesn't work (same error), tried with a base64 url (also didn't work) and also tried using another format (png).

Thanks in advance! 😉

Solution

According to the documentation:

You shouldn't POST the data as Content-Type: application/json (and therefore also neither stringify the data). Instead, you have to POST with FormData body. I think the example from mozilla is rather good to understand how to add FormData with the fetch API.
As the error message says, you have to provide some information about the image type. See the orc documentation about the two ways you have: either you set the Content-Type accordingly, or you provide an additional form parameter filetype (just scroll up a bit from my link to see the possible values).

Maybe it makes sense if you try to understand first how requests can look like and what ways exists to transfer data. The documentation provides you a collection for Postman as well as example curl commands (which, again, could be imported by Postman). It might make sense if you play around a bit with these.