NodeJS 应用 Socket.io 实现 OCR 文字识别-JavaScript中文网-JavaScript教程资源分享门户

OCR（Optical Character Recognition）是一种将图像中的文本转换为可编辑文本的技术，已经得到广泛应用。本文将介绍如何使用 NodeJS 应用 Socket.io 实现 OCR 文字识别的效果。

准备工作

在开始之前，你需要安装以下软件：

NodeJS：下载地址 https://nodejs.org/en/
Tesseract：OCR 引擎，下载地址 https://github.com/tesseract-ocr/tesseract

实现步骤

1. 创建项目

首先，打开命令行工具，进入你要保存项目的目录，执行以下命令：

$ mkdir ocr
$ cd ocr
$ npm init -y
$ npm i -S socket.io tesseract.js sharp

解释一下这几个命令：

mkdir ocr：创建一个名为 ocr 的文件夹。
cd ocr：进入 ocr 文件夹。
npm init -y：初始化一个 NodeJS 项目，并使用默认设置。
npm i -S socket.io tesseract.js sharp：安装 socket.io 和 tesseract.js 以及 sharp 模块。

2. 创建服务器

我们需要先创建一个服务器，才能使用 Socket.io 实现 OCR 文字识别。在项目目录下，创建一个名为 server.js 的文件，输入以下代码：

const http = require('http');
const app = require('express')();
const server = http.createServer(app);
const io = require('socket.io')(server);
const sharp = require('sharp');
const Tesseract = require('tesseract.js');

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', socket => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

我们在这个代码中引入了 http 和 socket.io 模块，创建了一个 HTTP 服务器，并将其绑定到了 Socket.io 上。我们同样使用了 sharp 和 tesseract.js 模块，用于处理和识别图片中的文字。

3. 创建前端页面

我们需要一个前端页面来上传图片，和显示识别结果。创建一个 index.html 文件，输入以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>OCR 文字识别</title>
    <script src="https://cdn.socket.io/3.1.3/socket.io.min.js"></script>
  </head>
  <body>
    <form action="#" id="imageForm">
      <input type="file" id="imageInput">
      <button type="submit">识别</button>
    </form>
    <div id="resultTarget"></div>

    <script>
      const socket = io();
      const form = document.getElementById('imageForm');
      const input = document.getElementById('imageInput');
      const target = document.getElementById('resultTarget');

      form.addEventListener('submit', event => {
        event.preventDefault();
        if (input.files.length === 0) return;

        const file = input.files[0];
        const reader = new FileReader();

        reader.readAsBinaryString(file);
        reader.onload = () => {
          const data = btoa(reader.result);
          socket.emit('image', data);
        };
      });

      socket.on('result', result => {
        target.textContent += `\n${result}`;
      });
    </script>
  </body>
</html>

这个页面很简单，包括一个上传图片的表单和一个用于显示识别结果的目标元素。这个页面还引入了 Socket.io 库，用于在前端页面和服务器之间建立 WebSocket 连接。

4. 上传图片和识别文字

现在，我们需要添加一些逻辑来实现识别文字的功能。在 server.js 中，添加以下的代码：

io.on('connection', socket => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.on('image', async data => {
    try {
      const buffer = Buffer.from(data, 'base64');
      const image = sharp(buffer);

      const { data: imageData, info: imageInfo } = await image.toBuffer({ resolveWithObject: true });
      const text = await Tesseract.recognize(imageData, {
        lang: 'chi_tra',
        tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz,.',
      });

      const result = text.data.text.replace(/\n/g, '');

      socket.emit('result', result);
    } catch (err) {
      console.error('Error:', err);
    }
  });
});

这段代码中，我们添加了一个 image 事件监听，用于监听前端页面上传图片时的事件。当收到上传的图片事件时，我们先将图片转换为 Buffer 数据，然后用 Sharp 处理一下图像，以便后续进行识别操作。之后使用 tesseract.js 对这个图像进行文字识别，并将识别结果发送到前端页面。

5. 运行服务器

现在，我们已经完成了 OCR 文字识别的所有代码工作，可以运行服务器了。在命令行中，执行以下命令：

$ node server.js

打开浏览器，访问 http://localhost:3000，上传需要识别的图片，点击 "识别" 按钮，即可看到识别结果出现在页面上了。

总结

本文主要介绍了如何使用 NodeJS 应用 Socket.io 实现 OCR 文字识别，通过这个实例，我们深入了解了 Socket.io 和 tesseract.js 的使用方法，同时也学习了如何处理和识别图片中的文字。如果你想将这个实例进一步地完善，你可以尝试优化图片处理的算法，或者增加一个基于 Firebase 的数据库来保存识别的结果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65901f2ceb4cecbf2d59e282