在前端开发中，处理图像和文本数据是非常常见的需求，其中，OCR（Optical Character Recognition，光学字符识别）技术可以将图片中的文字内容自动识别出来，为我们节省了大量的人力和时间成本。而 ocrad.js 则是一款基于 JavaScript 的 OCR 技术库，可以让我们在前端实现 OCR 功能。下面，本文就来详细介绍 ocrad.js 的使用方法。
安装 ocrad.js
首先需要使用 npm 安装 ocrad.js，打开命令行终端，输入以下命令即可：
npm install ocrad
安装成功后，在项目中引入 ocrad.js：
<script src="./node_modules/ocrad/ocrad.js"></script>
实现 OCR 功能
使用 ocrad.js 实现 OCR 功能的主要步骤如下：
- 加载图片数据
- 对图片数据进行处理和裁剪
- 使用 ocrad.js 实现 OCR
加载图片数据
首先，我们需要将图片数据加载到前端中。我们可以使用 FileReader API 来读取本地的图片文件，也可以通过 URL 来加载远程的图片。
下面是一个读取本地图片文件并将图片数据转换为 base64 格式的示例代码：
-- -------------------- ---- -------
----- ------------ - --------------------------------
----------------- - -------
------------------- - ----------
--------------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
---------------------------
------------- - ------- -- -
----- --------- - --------------------
-- ----- ------
--
---
----------------------------------------处理图片数据
接下来，我们需要对图片数据进行处理，以便 ocrad.js 可以识别出图片中的文字。其中，我们需要将图片转换成 grayscale 格式，并进行二值化处理，使得背景为白色、文字为黑色，这样才能方便地进行 OCR 识别。
这里我们使用 canvas 来处理图片数据。先创建一个 canvas 元素，并将其插入到文档中：
<canvas id="canvas"></canvas>
然后，可以在 JavaScript 中使用以下代码，将图片数据绘制到 canvas 上，并对其进行处理：
-- -------------------- ---- -------
----- ------------- - ----------------------------------
----- ------- - -------------------------------
----- ------------ - --- --------
---------------- - ----------
------------------- - -- -- -
------------------- - -------------------
-------------------- - --------------------
------------------------------- -- ---
----- --------- - ----------------------- -- -------------------- ----------------------
----- ---- - ---------------
--- ---- - - -- - - ------------ - -- -- -
----- - - --------
----- - - ------ - ---
----- - - ------ - ---
----- ---- - ----- - - - ----- - - - ----- - --
------- - -----
------ - -- - -----
------ - -- - -----
-
------------------------------- -- ---
----- ------------------ - ----------------------- -- -------------------- ----------------------
----- ------ - ---
--- ---- - - -- - - ------------------------------- - -- -- -
----- - - ---------------------------
----- - - ------------------------- - ---
----- - - ------------------------- - ---
----- ---- - ----- - - - ----- - - - ----- - --
----------------- - ---- - - - ---
-
-- ----- --------- -------- -- ---
--在上面的代码中，我们将图片转换成 grayscale 格式，并进行了二值化处理，将像素值小于 128 的位置设为 1，大于等于 128 的位置设为 0，这样就得到了一份二值图。接下来，我们需要对二值图进行裁剪，将无用的边框部分去除掉，以减小 ocrad.js 的处理压力。
裁剪图片数据
由于 ocrad.js 需要处理的图片的背景为白色、文字为黑色，因此我们需要将二值图进行反转，即将黑色变成白色、白色变成黑色。然后，我们需要找到二值图中的所有文字所在的范围，也就是二值图中的最小包围矩形，将这个矩形中的数据作为 ocrad.js 需要处理的数据。
下面是一个简单的图像裁剪代码示例：
-- -------------------- ---- -------
----- ----- - --------------------
----- ------ - ---------------------
----- -------- - --------------- -- -----------------
----- -------- - --- ----------- - -----------
------------------------------
---------------------------
--- ---- --- - -- --- - ------ - -- ------ -
----- ---------- - --- - ------ - ---
----- -------- - ---------- - ------
------------------- - -- - --
------------------ - --
-
--- --- - --
--- ------ - --
--- ---- - --
--- ----- - --
--- ------- - ------
--- ---------- - ------
--- -------- - ------
--- --------- - ------
--- ---- --- - -- --- - ------ - -- ------ -
----- ---------- - --- - ------ - ---
----- -------- - ---------- - ------
----- ------- - ------------------------- - -- -------- - ---
--- ---------- - -----
--- ---- --- - -- --- - ------ ------ -
-- ------------- --- -- -
---------- - ------
------
-
-
-- ----------- -- --------- -
--- - ----
- ---- -- ------------- -
------- - -----
-
-- ------------ -- ------------ -
------ - ----
- ---- -- ----------- -- ---------- -- ------- - -- - ---- -
-------- - ------
--------- - ------
------
-
-
--- ---- --- - -- --- - ------ ------ -
--- ---------- - -----
--- ---- --- - ---- --- - ------- ------ -
-- ------------- - ------ - -- - --- - -- --- -- -
---------- - ------
------
-
-
-- ----------- -- ---------- -
---- - ----
- ---- -- ------------- -
-------- - -----
-
-- ------------ -- ----------- -
----- - ----
- ---- -- ----------- -- --------- -- ------ - -- - ----- -
------
-
-
----- --------- - ----- - -----
----- ---------- - ------ - ----
----- ---------- - ---------------------------------
----- ----------- - ----------------------------
---------------- - ----------
----------------- - -----------
--------------------- - -------
----------------------- -- ----------------- -------------------
----- ------------- - --------------------------- -- ---------- ------------
--- ---- --- - ---- --- - ------- ------ -
----- ---------- - --- - ------ - -- - ---- - --
----- -------- - ---------- - ----------
----- ------- - ------------------------ ----------
----- ----------- - ----------------------------- - ---- - --------- - -- ---- - --- - -- - --------- - ---
--- ---- --- - -- --- - ---------- ------ -
----- ------- - ------------ --- --
----- ------ - --- - --
------------------- - ------- - - - ----
------------------ - -- - ------- - - - ----
------------------ - -- - ------- - - - ----
------------------ - -- - ----
-
----------------------------------- ---- - ---- - --------- - ---
-
--------------------------------------- -- ---
----- ---------------- - ----------------------------------
-- ----- -- -------- -- ---在上面的代码中，我们首先将二值图进行了反转，然后找到了所有文字所在的范围，计算出需要裁剪的图像尺寸。然后创建一个新的 canvas 元素，将裁剪后的图像绘制到这个 canvas 上，将其转换成 base64 格式，用作 ocrad.js 的输入数据。
使用 ocrad.js 进行 OCR
接下来，我们需要使用 ocrad.js 进行 OCR。ocrad.js 可以接收一个像素矩阵数据（即一个二维数组），返回图片中的所有文字内容。
下面是一个简单的 OCR 识别代码示例：
const pixelData = ocradjs.ocr(cropImageDataUrl);
console.log(pixelData.join('\n'));示例代码
最后，让我们将前面的代码整合到一起，形成一个完整的 ocrad.js 使用示例：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
----- ----------------
-------
------
------ ----------- ---------------- -------------------
------- ---------------------
------- ---------------------------------------------
--------
----- ------------ - -----------------------------------------
--------------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
---------------------------
------------- - ------- -- -
----- --------- - --------------------
----- ------------- - ----------------------------------
----- ------- - -------------------------------
----- ------------ - --- --------
---------------- - ----------
------------------- - -- -- -
------------------- - -------------------
-------------------- - --------------------
------------------------------- -- ---
----- --------- - ----------------------- -- -------------------- ----------------------
----- ---- - ---------------
--- ---- - - -- - - ------------ - -- -- -
----- - - --------
----- - - ------ - ---
----- - - ------ - ---
----- ---- - ----- - - - ----- - - - ----- - --
------- - -----
------ - -- - -----
------ - -- - -----
-
------------------------------- -- ---
----- ------------------ - ----------------------- -- -------------------- ----------------------
----- ------ - ---
--- ---- - - -- - - ------------------------------- - -- -- -
----- - - ---------------------------
----- - - ------------------------- - ---
----- - - ------------------------- - ---
----- ---- - ----- - - - ----- - - - ----- - --
----------------- - ---- - - - ---
-
----- ----- - --------------------
----- ------ - ---------------------
----- -------- - ---------------
----- -------- - --- ----------- - -----------
------------------------------
---------------------------
--- ---- --- - -- --- - ------ - -- ------ -
----- ---------- - --- - ------ - ---
----- -------- - ---------- - ------
------------------- - -- - --
------------------ - --
-
--- --- - --
--- ------ - --
--- ---- - --
--- ----- - --
--- ------- - ------
--- ---------- - ------
--- -------- - ------
--- --------- - ------
--- ---- --- - -- --- - ------ - -- ------ -
----- ---------- - --- - ------ - ---
----- -------- - ---------- - ------
----- ------- - ------------------------- - -- -------- - ---
--- ---------- - -----
--- ---- --- - -- --- - ------ ------ -
-- ------------- --- -- -
---------- - ------
------
-
-
-- ----------- -- --------- -
--- - ----
- ---- -- ------------- -
------- - -----
-
-- ------------ -- ------------ -
------ - ----
- ---- -- ----------- -- ---------- -- ------- - -- - ---- -
-------- - ------
--------- - ------
------
-
-
--- ---- --- - -- --- - ------ ------ -
--- ---------- - -----
--- ---- --- - ---- --- - ------- ------ -
-- ------------- - ------ - -- - --- - -- --- -- -
---------- - ------
------
-
-
-- ----------- -- ---------- -
---- - ----
- ---- -- ------------- -
-------- - -----
-
-- ------------ -- ----------- -
----- - ----
- ---- -- ----------- -- --------- -- ------ - -- - ----- -
------
-
-
----- --------- - ----- - -----
----- ---------- - ------ - ----
----- ---------- - ---------------------------------
----- ----------- - ----------------------------
---------------- - ----------
----------------- - -----------
--------------------- - -------
----------------------- -- ----------------- -------------------
----- ------------- - --------------------------- -- ---------- ------------
--- ---- --- - ---- --- - ------- ------ -
----- ---------- - --- - ------ - -- - ---- - --
----- -------- - ---------- - ----------
----- ------- - ------------------------ ----------
----- ----------- - ----------------------------- - ---- - --------- - -- ---- - --- - -- - --------- - ---
--- ---- --- - -- --- - ---------- ------ -
----- ------- - ------------ --- --
----- ------ - --- - --
------------------- - ------- - - - ----
------------------ - -- - ------- - - - ----
------------------ - -- - ------- - - - ----
------------------ - -- - ----
-
----------------------------------- ---- - ---- - --------- - ---
-
--------------------------------------- -- ---
----- ---------------- - ----------------------------------
----- --------- - ------------------------------
----------------------------------
--
--
---
---------
-------
-------在上面的代码中，当用户选择一张图片文件后，对其进行预处理和裁剪，并进行 OCR，将 OCR 识别结果输出到浏览器控制台。这里，我们使用了 FileReader API、canvas API 和 ocrad.js 技术，实现了一个简单的 OCR 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a671b4