Angular + Tesseract.js（和 opencv.js）答案

【问题标题】：Angular + Tesseract.js (and opencv.js)Angular + Tesseract.js（和 opencv.js）
【发布时间】：2021-04-27 00:34:04
【问题描述】：

我目前尝试在 Angular 中使用 tesseract.js，对之前在 opencv.js 中修改过的图像进行一些识别。

通过 opencv.js 进行的图像处理现在工作得非常好，但我无法弄清楚我使用 tesseract.js 的不同尝试有什么问题...

当我在网上学习一些教程时，效果很好，我可以在默认示例图像上执行 OCR，例如（仅相关部分）

     const exampleImage = 'https://tesseract.projectnaptha.com/img/eng_bw.png';

        const worker = Tesseract.createWorker({
          logger: m => console.log(m)
        });

        Tesseract.setLogging(true);
        work();

        async function work() {
          await worker.load();
          await worker.loadLanguage('eng');
          await worker.initialize('eng');

          let result = await worker.detect(exampleImage);
          console.log(result.data);

          await worker.terminate();
        }

但是，当我尝试对先前处理的图像（通过 opencv.js）、cv.Mat() 图像或通过生成的 html 画布执行相同操作时......我总是得到同样的错误：

tesseract.js error : TypeError: Cannot read property 'SetImage' of null

我也收到此错误：Error in pixReadMem: size < 12

我真的不明白我做错了什么，我相信我的错误可能在于我将图片提供给 tesseract 的方式......但我尝试过的每一种方式都没有奏效，所以我在这里寻求您的帮助。

不工作的代码示例：

    const worker = Tesseract.createWorker({
          logger: m => console.log(m)
        });

        Tesseract.setLogging(true);
        work(onlyDocument);

        async function work(d) {
          await worker.load();

          const ctx = document.getElementById('result').getContext('2d');

          const buffer = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data.buffer;

          const result2 = await worker.detect(buffer);

          console.log(result2.data);

          await worker.terminate();
        }

我必须准确地指出，我尝试的每一种格式都可以将图像提供给 tesseract.js（缓冲区、画布、数组……）

【问题讨论】：

标签： angular opencv ocr tesseract tesseract.js

【解决方案1】：

在执行任何 OCR 任务之前，您需要 initialize Tesseract API。这将解决以下错误。

tesseract.js 错误：TypeError：无法读取 null 的属性“SetImage”

解决方案：

 //Your async function
 async function work(d) {
   await worker.load();
   await worker.loadLanguage('eng');
   await worker.initialize('eng');
   //language choice (e.g.: 'eng') based on trained data available
   //Image like input can now be given to recognize(), detect() methods
   ...
   await worker.terminate();
 }

初始化后，只要 API 的输入是类似图像的，无论图像是否经过预处理/未处理，它都应该工作。希望这能解决您的问题。

P.S.：教程示例已初始化 API，因此没有引发错误。

【讨论】：