时间戳

首页 > 解决方案 > Angular + Tesseract.js（和 opencv.js）

angular - Angular + Tesseract.js（和 opencv.js）

问题描述

我目前尝试在 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 错误：TypeError：无法读取 null 的属性“SetImage”

我也收到此错误：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 的格式（缓冲区、画布、数组......）

标签： angularopencvocrtesseracttesseract.js

解决方案

在执行任何 OCR 任务之前，您需要初始化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 的输入是类似图像的，无论图像是否经过预处理/未处理，它都应该工作。希望这能解决您的疑问。

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

推荐阅读