HTML本身不能做OCR，它只是标记语言，所有OCR功能必须依赖JavaScript库（如Tesseract.js）或后端API调用，直接写OCR()会因未定义、跨域、语言包未加载等原因失败。
HTML 本身不能做 OCR——它只是标记语言，没有图像处理或模型推理能力。所谓“前端 OCR”，实际是调用浏览器环境中的 JavaScript 库（如 Tesseract.js）或对接后端 OCR 服务，HTML 只负责承载界面和触发流程。
为什么直接在 HTML 里写 OCR() 会失败
常见错误现象：ReferenceError: OCR is not defined、点击按钮无反应、上传图片后控制台静默报错。
- HTML 中没有原生
OCRAPI，所有“OCR”功能都依赖外部 JS 库或 HTTP 请求 - 直接 script 标签引入未初始化的库（如只引了
tesseract.min.js但没调Tesseract.recognize()）会导致函数不可用 - 现代浏览器默认阻止跨域请求，若调用第三方 OCR 接口（如百度 OCR），未配置 CORS 或未走自己后端代理，会卡在
net::ERR_FAILED - Tesseract.js 默认加载 40+ MB 的语言包，首次识别前需等待下载完成，没加 loading 状态提示，用户会误以为卡死
用 Tesseract.js 在前端做 OCR 的最小可行路径
适用场景：离线识别、对隐私敏感（文字不上传）、支持中文且可接受 2–5 秒延迟。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须通过
npm install tesseract.js或 CDN 引入完整包，仅靠<script src="...">不够，还需workerPath和langPath配置 - 中文识别必须显式传
lang: 'chi_sim'（简体）或'chi_tra'（繁体），默认eng对中文返回空字符串 - 输入图片需转为
<canvas>或Blob，直接传<img src="xxx">会因跨域被拒绝（本地 file:// 协议下尤其明显） - 示例关键调用：
Tesseract.recognize( imageBlob, 'chi_sim', { logger: m => console.log(m.status) } ).then(({ data: { text } }) => console.log(text))
调用后端 OCR 接口更稳定但要注意三点
适用场景：高精度（如发票识别）、多语言混合、批量处理、需复用已有模型服务。
立即学习“前端免费学习笔记（深入）”；
- 不要让前端直连厂商接口（如
https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic），Access Token 明文暴露在前端等于泄露 API Key - 必须用自己后端做代理：前端
fetch('/api/ocr', { method: 'POST', body: formData })→ 后端用 Node/Python 拼签名、转发请求、返回{ text: '...' } - 图片尺寸影响识别率和超时概率，前端应限制上传大小（
file.size > 5 * 1024 * 1024提示“图片过大”），后端也需校验并缩放（Tesseract 对 >2000px 宽度的图易漏字）
真正卡住人的往往不是“怎么调接口”，而是图片预处理缺失（模糊/倾斜/低对比度导致识别率骤降）、语言包加载时机没监听、或把 base64 字符串直接当 Blob 传给 Tesseract（需先 fetch(dataUrl).then(r => r.blob())）。这些细节不处理，90% 的“前端 OCR”会在真实图片上失效。
