Tesseract.js not recognizing picture in an PWA App

Question

I have a SAPUI5 web application I'm currently working on, the app requires an OCR feature. The basic flow is:

1. Choose picture: a) From gallery (PNG, JPG, JPEG, HEIF) b) Take a picture (PNG, JPG, JPEG, HEIF)
2. Analyses the picture and returns the text. The flow 1.b does not work at all on both iPhone and Android devices And the flow 1.a seems to fail whenever I'm choosing a photo from gallery that is in HEIF format. However, as I was debugging , I noticed that the HEIF format picture seems to work whenever I run the app in browser and trying to retrieve the text from a picture.

This is my implementation, including some potential solutions found on stackoverflow and github issues.

 that.getView()
  .getController()
  .readOcr(imageData)
  .then(function (result) {
      onDeviceReadySuccess(result);
   })
  .catch(function (error) {
      onDeviceReadyFail(error);
   });

The "imagedata" argument is the value that "readFile" function resolves.

readOcr: function (imageUrl) {
          return new Promise(async function (resolve, reject) {
            const { createWorker } = Tesseract;

            const worker = await createWorker({
              langPath: "../libs/assets",
              logger: (m) => console.log(m)
            });
            worker
              .loadLanguage("eng")
              .then(() => worker.initialize("eng"))
              .then(() => worker.recognize(imageUrl))
              .then(({ data: { text } }) => {
                resolve(text);
                worker.terminate();
              })
              .catch((error) => {
                reject(error);
                worker.terminate();
              });
          });
        }

The result the readOcr is the following one, some random text:. The tesseract debugger when processing the image returns this message.

readFile: function (file) {
          return new Promise(function (resolve, reject) {
            var reader = new FileReader();
            
            var img = new Image();

            reader.onload = function () {
              resolve(reader.result);
              img.onload = function () {

                const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");

                ctx.imageSmoothingQuality = "high";

                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                const pngDataUrl = canvas.toDataURL("image/png");
                resolve(pngDataUrl);
              };
              img.onerror = function () {
                reject(new Error("Failed to load image"));
              };
              img.src = reader.result;
            };
            reader.onerror = function () {
              reject(reader.error);
            };
            reader.readAsDataURL(file);
          });
        },

Tried to convert the image to base64 / png image, did not give any result.

var reader = new FileReader();
var img = new Image();

reader.onload = function () {
 resolve(reader.result);
 img.onload = function () {

 const canvas = document.createElement("canvas");
 const ctx = canvas.getContext("2d");

 ctx.imageSmoothingQuality = "high";

 canvas.width = img.width;
 canvas.height = img.height;

 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

 const pngDataUrl = canvas.toDataURL("image/png");
 resolve(pngDataUrl);
};
 img.onerror = function () {
 reject(new Error("Failed to load image"));
};
 img.src = reader.result;
};