如何使用Tesseract.js使用纯JavaScript将图像转换为文本

本文概述

1.安装Tesseract.js
2.从图像中识别文本

如今, 光学字符识别是数字化文档的首选方法, 而不是手动输入文档的元数据, 因为OCR会识别文档中的文本, 这些文本将被输入到文档管理系统中, 并允许你使用纯文本, 甚至无需你自己阅读。对于JavaScript, 有一个基于Tesseract OCR引擎的流行解决方案, 我们正在谈论Tesseract.js项目。 Tesseract.js是流行的Tesseract OCR引擎的纯Javascript端口。该库支持60多种语言, 自动文本定向和脚本检测, 用于读取段落, 单词和字符边界框的简单界面。 Tesseract.js可以在具有NodeJS的浏览器和服务器上运行, 这使其可以在许多平台上使用。
在本文中, 我们将展示如何在浏览器中使用Tesseract.js将图像转换为文本(从图像中提取文本)。
1.安装Tesseract.js 如上所述, 你可以使用CDN或本地副本从浏览器中使用Tesseract.js库(有关此库的更多信息, 请访问Github上的官方存储库)。 Tesseract.js以下列方式工作, 你将需要2个脚本, 即tesseract.js及其tesseract-worker.js。如预期的那样, 为了在浏览器中获得可接受的性能, 脚本使用了位于另一个文件(tesseract-worker.js)中的Web工作者, 这意味着你只需要包含tesseract.js, 并且该工作者需要位于与脚本相同的目录将自动为你包括工作程序。
A.1。快速简便的方法使用免费的CDN, 你只能在文档中包含tesseract脚本, 该脚本会自动在后台包含工作程序：

< !-- Using a free CDN --> < script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'> < /script>

它还会自动从CDN中加载所需语言的训练数据(如果要托管本地副本, 则需要你自己做)。包含此简单脚本后, 你就可以使用tesseract了, 因此请执行步骤2。
A2。从本地副本如果你不选择使用CDN, 则你希望在自己的服务器中拥有脚本的本地副本。你首先需要知道的是, 你必须下载Tesseract的工作程序的主要2个脚本和索引脚本：

index.js(可从tesseract.js核心存储库中获得, 即index.js文件)
worker.js

将它们放在某个文件夹中后, 你还将需要一些经过语言训练的数据(至少要使用的数据), 这些数据将存储在某个文件夹中, 其中包含需要添加到Tesseract的所有语言, 你需要在Tesseract初始化期间提供此文件夹的路径：

// After including the Tesseract script, initialize it in the browserwindow.Tesseract = Tesseract.create({// Path to workerworkerPath: '/worker.js', // Path of folder where the language trained data is locatedlangPath: '/langs-folder/', // Path to index script of the tesseract core ! https://github.com/naptha/tesseract.js-corecorePath: '/index.js', });

Tesseract脚本使用简单的langPath + langCode +’ .traineddata.gz’ 模式来下载脚本所需语言的正确训练数据。你可以通过使用语言代码ISO 639-2 / T或ISO 639-2 / B(3个字符代码)并从CDN下载文件来获取此数据, 例如下载英语和西班牙语数据(你可以获取tessdata存储库中的文件)：

// Download the spanish trained datahttps://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/spa.traineddata.gz// Download the english trained datahttps://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/eng.traineddata.gz

在前面的示例中, 仅使用两种语言, 文件夹的结构如下：

文章图片
请记住, 脚本会下载所需的训练数据(除非你愿意, 否则不会同时下载所有数据)。文件大小通常不超过几KB, 但至少要超过800Kb(例如, 英文包的大小为9MB)。
2.从图像中识别文本正确包含库之后, 你将能够使用Tesseract.recognize方法将图像转换为文本, 该方法基本上提供Promise接口, 并且工作方式如下。该方法可以找出图像中有哪些单词, 图像中有哪些单词, 等等。
注意图像应具有足够高的分辨率。通常, 如果在调用识别之前放大同一图像, 则其效果会好得多。
image是任何ImageLike对象。 Tesseract.js的主要功能带有一个image参数, 该参数应该类似于一个图像。根据是从浏览器运行还是通过NodeJS运行, 所谓的” 类似图像” 有所不同。
在浏览器上, 图像可以是：

img, 视频或画布元素
一个CanvasRenderingContext2D(由canvas.getContext(‘ 2d’ )返回)
File对象(来自文件< input> 或拖放事件)
Blob对象
一个ImageData实例(一个包含width, height和data属性的对象)
可访问图像的路径或URL(该图像必须托管在本地或可由CORS访问)

在Node.js中, 图像可以是

本地图像的路径
包含PNG或JPEG图像的Buffer实例
一个ImageData实例(一个包含width, height和data属性的对象)

【如何使用Tesseract.js使用纯JavaScript将图像转换为文本】选项不存在(在这种情况下, 它被解释为” eng” ), 从语言列表中指定语言短代码的字符串, 或者可能具有以下含义的简单json对象：

包含覆盖默认tesseract参数的某些子集的属性
包含一个lang属性, 其值来自lang参数列表

该方法返回一个TesseractJob, 然后可以使用它, progress, catch和finally方法对结果进行操作, 因此你可以将其存储到变量中, 并根据需要调用某些方法。下面的示例显示了如何使用本地资源和基本初始化从图像中识别英语单词(代码已准备好进行测试, 只需更改项目中图像文件的路径即可)：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title> Tesseract Example< /title> < /head> < body> < button id="img-to-txt"> Convert image to text< /button> < script src="http://www.srcmini.com/tesseract.js"> < /script> < script> // 1. After including the Tesseract script, initialize it in the browser// Note: to prevent problems while tesseract loads scripts, provide the absolute path to the file from your domainwindow.Tesseract = Tesseract.create({// Path to workerworkerPath: 'http://mydomain.com/worker.js', // Path of folder where the language trained data is located// note the "/" at the end, this string will be concatenated with the selected languagelangPath: 'http://mydomain.com/langs-folder/', // Path to index script of the tesseract core ! https://github.com/naptha/tesseract.js-corecorePath: 'http://mydomain.com/index.js', }); // 2. Write some logic to initialize the text recognitiondocument.getElementById("img-to-txt").addEventListener("click", function(){let btn = this; // Disable button until the text recognition finishesbtn.disable = true; // Convert an image to text. This task works asynchronously, so you may show// your user a loading dialog or something like that, or show the progress with TesseractTesseract.recognize("./text.png").then(function(result){// The result object of a text recognition contains detailed data about all the text// recognized in the image, words are grouped by arrays etcconsole.log(result); // Show recognized text in the browser !alert(result.text); }).finally(function(){// Enable button once the text recognition finishes (either if fails or not)btn.disable = false; }); }, false); < /script> < /body> < /html>

但是, 并非世界上的每个文本都是英语, 因此只要你拥有此软件包, 就可以将其配置为使用来自另一种语言的预训练数据。例如, 使用西班牙语：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title> Tesseract Example< /title> < /head> < body> < button id="img-to-txt"> Convert image to text< /button> < script src="http://www.srcmini.com/tesseract.js"> < /script> < script> // 1. After including the Tesseract script, initialize it in the browser// Note: to prevent problems while tesseract loads scripts, provide the absolute path to the file from your domainwindow.Tesseract = Tesseract.create({// Path to workerworkerPath: 'http://mydomain.com/worker.js', // Path of folder where the language trained data is located// note the "/" at the end, this string will be concatenated with the selected languagelangPath: 'http://mydomain.com/langs-folder/', // Path to index script of the tesseract core ! https://github.com/naptha/tesseract.js-corecorePath: 'http://mydomain.com/index.js', }); // 2. Write some logic to initialize the text recognitiondocument.getElementById("img-to-txt").addEventListener("click", function(){let btn = this; // Disable button until the text recognition finishesbtn.disable = true; // Configure recognitionlet tesseractSettings = {lang: 'spa'}; // Convert an image to text. This task works asynchronously, so you may show// your user a loading dialog or something like that, or show the progress with TesseractTesseract.recognize("./texto.png", tesseractSettings).then(function(result){// The result object of a text recognition contains detailed data about all the text// recognized in the image, words are grouped by arrays etcconsole.log(result); // Show recognized text in the browser !alert(result.text); }).finally(function(){// Enable button once the text recognition finishes (either if fails or not)btn.disable = false; }); }, false); < /script> < /body> < /html>

在本文中, 我们介绍了从图像中检索文本的基本必要性。该库提供了更多实用程序, 例如显示识别进度, 找出正在使用图像的脚本类型, 例如” 拉丁” , “ 中文” 。因此, 请随时访问Github上的官方存储库以发现更多有用的方法。
编码愉快！