JavaScript网页基于tesseract.js提取图片中的文字，识别车牌，识别快递单号等

Tesseract是我们的老盆友了，以前写过基于JavaCV版本的Tesseract字符识别，现在tesseract终于可以在网页上面用了（tesseract.js），让我们一起来试试效果。

注意：本章使用Vue模块化调用tesseract.js方式，除了前端内容外将会涉及部分图像处理算法，比如：使用二值化来提升文字和背景的对比度；使用高斯滤波（请参考《JavaScript图像处理，JavaScript实现高斯滤波图像处理算法》）来减少图像噪声，使得文本区域更加明显；使用腐蚀、膨胀来去除小的噪点并连接断裂的文字部分。

最终效果演示

Tesseract介绍

Tesseract 是一个开源的 OCR（光学字符识别）引擎，最初由惠普实验室开发，后来由 Google 接管并开源。OCR 是一种将图像中的文本转换为可编辑文本的技术，它可以自动识别图像或扫描文档中的文字，并将其转换为数字形式。

Tesseract 的特点包括：

高度准确性： Tesseract 在处理标准字体、清晰图像时具有很高的识别准确性，可以准确地识别各种字体和字号的文字。

多语言支持： Tesseract 支持多种语言的文字识别，包括英语、中文、日语、西班牙语等，使其在全球范围内具有广泛的应用。

开源： Tesseract 是基于 Apache 许可证发布的开源项目，允许用户自由地使用、修改和分发其代码。

灵活性： Tesseract 提供了丰富的配置选项和 API，使用户可以根据自己的需求进行定制和扩展，例如调整识别参数、添加自定义字典等。

Tesseract 被广泛应用于各种领域，包括文档转换、数字化档案管理、自然场景文字识别（如路牌识别、车牌识别）、手写文字识别等。它是一个功能强大且成熟的 OCR 引擎，为用户提供了便捷的图像文字识别解决方案。

依赖

npm i tesseract.js

实现功能

1. 上传图片
2. 显示上传图片到页面
3. 二值化上传的图片，增加对比度
4. 使用高斯滤波来减少图像噪声，凸显文本区域
5. 腐蚀、膨胀图像来去除小的噪点并连接断裂的文字部分
6. 显示二值化处理后图像到页面
7. 使用tesseract提取图像中的文字
8. 显示tesseract计算结果字符到页面

实现代码

通过运行实例，可以看出对于规整的图片识别效果较好，对于背景杂乱，文字排版复杂都需要再进行优化，文字字体也需要额外进行训练才能达到最终效果。