SAPUI5 PWA中Tesseract.js无法识别拍照及HEIF格式图片问题

应用与功能概述 #

正在开发一款SAPUI5 Web应用，集成OCR功能，核心流程如下：

• 选择图片：
  • 从图库选择（支持PNG、JPG、JPEG、HEIF格式）
  • 拍照获取（支持PNG、JPG、JPEG、HEIF格式）
• 分析图片并返回识别文本

当前问题 #

1. 拍照获取图片的流程在iPhone和Android设备上完全失效
2. 从图库选择HEIF格式图片时识别失败，但浏览器环境下HEIF格式图片可正常识别

实现代码与尝试的解决方案 #

1. readOcr调用逻辑 #

imageData为readFile函数解析后的值：

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

2. OCR识别核心函数（readOcr） #

使用Tesseract.js实现识别：

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

问题现象：

• readOcr返回随机乱码
• Tesseract调试器处理图片时返回对应日志信息

3. 图片读取与格式转换函数（readFile） #

尝试将图片转换为base64/PNG格式以解决HEIF识别问题，但未生效：

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

重复尝试的图片转换逻辑 #

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

内容的提问来源于stack exchange，提问作者nick_cer