Question

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

未捕获的SyntaxError：意外的令牌＆lt; 在blob：http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1 （匿名）@ blob：http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1

我读过的一篇文章说使用CDN，但是我的构建过程中没有包含Tesseract，这会引发错误。所以我认为我必须将它包括在内才能使用React。

Answer 1

我有同样的问题，然后我不得不挖掘一下，让它使用CDN。

这是我做的，我希望这可以帮助解决一下：

在<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包装器制作了一个包装器，并将其与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和angular）一起使用，而不会再遇到任何问题。

P.S。我现在是tesseract.js的贡献者之一，如果您有任何问题/要求，请随时告诉我。：）

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

4 个答案: