如何让浏览器无需服务端即可读取图片中的文字

想象一下，你正在开发一个费用追踪Web应用，用户需要手动输入发票上的数据。这很无聊、很慢，而且说实话已经过时了。你只是想拍一张纸的照片，然后立即把数字存入数据库。通常情况下，这类任务需要搭建笨重的Python服务配合OCR，或者每次请求都要向云服务商付费。但有一个更简单、更重要的是——免费的方法。

我们要介绍的是Tesseract.js。这是传奇Tesseract OCR引擎的JavaScript移植版本，可以在浏览器或Node.js中直接运行。

这东西到底是什么

Tesseract.js不仅仅是一个API封装。开发者们拿来了原始的C++引擎，将其编译为WebAssembly，并打包成一个便捷的JS库。因此，我们获得了一个运行在客户端的完整文字识别功能。

为什么需要这个？第一，隐私保护。用户数据不会上传到你的服务器，所有处理都在本地完成。第二，节省基础设施成本。你的服务器不需要为繁重的模式识别计算消耗资源——这项工作由用户的处理器来完成。

该库支持超过100种语言，包括俄语。入门只需要几行代码。以下是使用模块在Node.js或浏览器中的基本示例：

如果需要处理大量照片，为每张照片创建一个worker可不是什么好主意。更好的做法是初始化一次，通过 recognize 方法处理所有图片，然后再关闭它。

这个项目早已超越了简单的文字识别。最近的版本（目前是v5和v6）带来了许多有用的功能。

该库能自动检测文字方向。如果用户上传了一张侧拍的照片，Tesseract.js会尝试旋转它以获得更好的效果。你甚至可以提取中间图像：看看算法是如何将图片转换为黑白或去除噪点的。

有趣的是，这个项目还能处理实时视频。你可以把智能手机摄像头对准价签，脚本会立即从视频流中"提取"出相关文字。

在v5版本中，开发者们在文件大小上下了很大功夫。英语的训练模型文件缩小了54%，而中文——整整缩小了73%。对于网络应用来说，每一兆字节都很重要，这非常关键。

没有不带云的正午阳光。Tesseract.js是纯OCR。它能很好地处理高对比度背景上的印刷文本，但在手写输入或过于复杂的设计面前就力不从心了。

另一个细节——PDF。原库不支持它们。如果你的任务是解析多页文档，你需要先将它们转换为图片，或者寻找替代方案，比如Scribe.js——它就是从扩展Tesseract.js功能的尝试中诞生的。

你还需要记住，WebAssembly功能强大但很耗内存。如果你在内存不足的智能手机上运行识别，同时还有十几个标签页打开，页面可能会直接"崩溃"。

根据我的经验，这类工具在小型的内部工具中最常用。例如：

如果你需要快速添加文字识别，又不想处理后端，Tesseract.js是最显而易见且经过时间验证的选择。这个项目充满活力，维护积极，社区庞大，所以大多数问题都能在五分钟内通过Google找到解决方案。

你可以在他们的官方演示网站上试用这个库。在那里你可以清楚地看到引擎是如何"看到"文档结构并将其分解为块和单词的。