介绍
在进行图像识别任务时，Tesseract 是一款广泛使用的 OCR 引擎。@tessdata/bul 是一个基于 Tesseract OCR 引擎所创建的 npm 包，它包含了 Tesseract 所需的语言数据集供识别，因此可以在前端开发过程中用来进行 OCR 识别。
本教程将介绍如何使用 npm 包 @tessdata/bul，在前端应用中集成 OCR 功能。
步骤
步骤一：安装 @tessdata/bul
可以通过 npm 进行安装。
npm install @tessdata/bul
步骤二：构建 OCR 引擎
使用以下代码构建 OCR 引擎。
-- -------------------- ---- -------
----- - ------------ - - --------------------------------------
----- -------- - ------------------------- -- -----
----- ------ - --------------
------- - -- ---------------
--------- ---------
---
-- --- --- --
-------------
-------- -- ---------------------------
-------- -- --------------------------步骤三：进行 OCR 识别
使用以下代码进行 OCR 识别。
// 进行 OCR 识别
worker.recognize(imgFile)
.then(({ data: { text } }) => {
console.log(`识别文本为：${text}`);
});其中，imgFile 需要是一个图片文件。
示例
接下来，我们将以实际使用情境为例进行演示。
假设我们需要在一个前端应用中进行 OCR 识别，我们使用一个包含输入框和识别按钮的 HTML 页面作为示例。
<input type="file" id="img-file" accept="image/*"> <button id="btn-translate">识别文本</button> <div id="result"></div>
示例步骤一：读取图片
在页面加载完成后，我们使用以下代码读取图片文件。
const imgFile = document.querySelector('#img-file');
const img = new Image();
// 读取图片
img.onload = () => {
// 进行 OCR 识别
};
img.src = URL.createObjectURL(imgFile.files[0]);示例步骤二：进行 OCR 识别
使用以下代码进行 OCR 识别。
-- -------------------- ---- -------
----- ------- - ------------------------------------
----- --- - --- --------
----- --------- - ----------------------------------
-- ----
---------- - ----- -- -- -
-- -- --- --
----- - ----- - ---- - - - ----- ----------------------
-- -- --- ----
------------------- - -----
--
------- - --------------------------------------示例步骤三：完整代码
以下是完整代码，可在浏览器中运行验证。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----------
-------
------
------ ----------- ------------- -----------------
------- --------------------------------
---- ------------------
------- -----------------------------------------------------------------------
------- ----------------------------------------------------------
--------
----- - ------------ - - ----------
----- -------- - -------------
----- ------ - --------------
------- - -- ---------------
--------- ---------
---
-- --- --- --
-------------
-------- -- ---------------------------
-------- -- --------------------------
----- ------------ - -----------------------------------------
----- ------- - ------------------------------------
----- --------- - ----------------------------------
-------------------- - ----- -- -- -
----- --- - --- --------
-- ----
---------- - ----- -- -- -
-- -- --- --
----- - ----- - ---- - - - ----- ----------------------
-- -- --- ----
------------------- - -----
--
------- - --------------------------------------
--
---------
-------
-------结语
本文介绍了 @tessdata/bul 的使用方法，并提供了一个基于该 npm 包的前端应用示例。希望本文对于初学者进行 OCR 图像识别有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005624a81e8991b448df8b7