介绍
在进行图像识别任务时,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