如何在 React 应用中使用 Tesseract.js

Question

我正在使用 React 开发一个应用程序。我希望能够加载图片，然后 Tesseract.js 将其转换为文本。我正在使用 react-dropzone 加载图像文件，我可以使用 img 标签将图像添加到页面。但是当我尝试使用 Tesseract 运行 ocr 时，它给了我这个错误：

未捕获的语法错误：意外的标记 < 在 blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1 （匿名）@ blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1

一个 post 我读到说要使用 CDN，但是 Tesseract 没有包含在我的构建过程中，这会引发错误。所以我认为我必须包含它才能使用 React。

Answer 1

我遇到了同样的问题，然后我不得不深入研究一下，让它使用 CDN 工作。

这是我所做的，我希望这可以作为一种解决方法有所帮助：

在index.html里面添加<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script><head></head>
在App.js

var Tesseract = window.Tesseract;

参考：https://github.com/naptha/tesseract.js/issues/134

Answer 2

试试这个:)

1) 安装节点模块 npm i -S tesseract.ts tesseract.js

2) 从 'tesseract.ts'

导入 Tesseract

你准备好了....

Answer 3

我刚刚制作了一个基于 Typescript Wrapper 的包装器，将其与 next.js (React) 一起使用及其工作。

TesseractWrapper.js

if (typeof window !== 'undefined') {
  const _instance = window ? require("tesseract.js/dist/tesseract") : require('tesseract.js');
  exports.Tesseract = _instance;
}

那我就

import { Tesseract } from '../../lib/TesseractWrapper';

Answer 4

我知道这个问题已经很久了，现在 tesseract.js@1.0.16 已经解决了这个问题，它可以与 react，vue 和 [=18= 等任何框架一起使用] 没有更多问题。

P.S。我现在是 tesseract.js 的贡献者之一，如果您有 issues/requirements，请随时告诉我。 :)

如何在 React 应用中使用 Tesseract.js

How to use Tesseract.js in a React app

reactjs

tesseract.js