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

【问题标题】：How to use Tesseract.js in a React app如何在 React 应用程序中使用 Tesseract.js
【发布时间】：2018-04-15 17:42:11
【问题描述】：

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

Uncaught SyntaxError: Unexpected token http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1 （匿名）@blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1

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

【问题讨论】：

标签： reactjs tesseract.js

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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';

【讨论】：

【解决方案4】：

试试这个:)

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

2) 从 'tesseract.ts' 导入 Tesseract

你准备好了……

【讨论】：