【高频考点精讲】前端OCR识别方案：如何用Tesseract.js识别图片文字？
前端OCR识别方案：如何用Tesseract.js识别图片文字？
🧑🏫 作者：全栈老李
📅 更新时间：2025 年 5 月
🧑💻 适合人群：前端初学者、进阶开发者
🚀 版权：本文由全栈老李原创，转载请注明出处。
今天咱们聊聊一个前端工程师可能会遇到的\"硬核\"需求——在浏览器里直接识别图片中的文字。想象一下，用户上传一张发票照片，你的网页就能自动提取发票号码；或者用户拍个菜单，你的应用就能识别出菜品名称。这听起来像是后端该干的活，但其实前端也能搞定！（全栈老李温馨提示：前端越来越强大了）
为什么是Tesseract.js？
说到OCR（光学字符识别），你可能听说过百度OCR、阿里OCR这些商业API。但今天我要介绍的是一个纯前端解决方案——Tesseract.js。它是著名的开源OCR引擎Tesseract的JavaScript移植版本，最大的特点就是完全在浏览器中运行，不需要后端服务支持。
优点很明显：
- 隐私保护：图片不用上传到服务器
- 离线可用：打包进PWA应用就能离线工作
- 免费开源：没有API调用次数限制
当然也有局限：
- 准确率比商业API略低
- 大文件处理可能卡顿
- 中文识别需要额外加载语言包
实战：5分钟实现图片文字识别
先来看看最基本的用法。我们需要做三件事：
- 引入Tesseract.js库
- 加载语言数据（识别中文要加载chi_sim）
- 调用识别API
<!DOCTYPE html><html><head> <title>Tesseract.js 文字识别</title> <script src=\"https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js\"></script></head><body> <input type=\"file\" id=\"upload\" accept=\"image/*\"> <div id=\"result\"></div> <script> document.getElementById(\'upload\').addEventListener(\'change\', async (e) => { const file = e.target.files[0]; if (!file) return; // 显示加载状态 const resultDiv = document.getElementById(\'result\'); resultDiv.innerHTML = \'识别中...\'; try { // 调用Tesseract识别 const { data: { text } } = await Tesseract
