纯前端OCR可行但受限：tesseract.js适合中小图和低精度需求，PaddleOCR.js中文更强但体积大、兼容性差；大图或高精度需后端API；结果渲染需注意坐标换算、空格处理与复制兼容性。
直接在浏览器里做 OCR，不用传图到服务器、不走后端，是可行的，但只适用于中小尺寸图片（≤2MB）和中低精度需求场景。核心限制在于：Tesseract.js 在浏览器中运行会吃 CPU、卡主线程、识别中文慢，且对倾斜/模糊/手写体基本无解。
用 tesseract.js 做纯前端 OCR 的实操要点
这是目前最成熟的浏览器端 OCR 方案，适合快速验证或轻量集成。
-
tesseract.js默认加载的是英文模型（eng.traineddata），中文必须显式加载：Tesseract.recognize(img, 'chi_sim')或'chi_sim_vert'（竖排） - 图像预处理不能跳过：原始截图或手机照片往往对比度低、有阴影，
canvas上先做灰度+二值化（阈值建议 140–160），能显著提升识别率 - 别用
input[type="file"]直接传File对象给Tesseract.recognize()—— 它只接受Image、HTMLImageElement或 base64 字符串；要用FileReader先转成data URL - 大图（>1500px 宽）务必缩放：Canvas 绘制时用
ctx.drawImage(img, 0, 0, width, height)控制尺寸，否则内存溢出或识别超时
paddleocr.js 在 HTML 中调用的实际效果
它比 tesseract.js 更适合中文，但体积大（压缩后仍 >8MB）、首次加载慢，且目前仅支持 WebAssembly 模式（不兼容 IE 和部分旧安卓 WebView）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 初始化耗时长，建议加 loading 提示，不要让用户干等；可提前执行
PaddleOCR.load()，等用户选图后再调.recognize() - 它默认返回带坐标和置信度的结果，但
location是相对 canvas 坐标系，若你 canvas 尺寸与原图不一致，需按比例换算 - 不支持垂直文本自动旋转检测，遇到发票/表格里的竖排文字，得自己用
ctx.rotate()预转 90° 再识别 - 移动端 Safari 下偶发 wasm 编译失败，加
try/catch并 fallback 到 tesseract.js 是稳妥做法
绕过浏览器限制：用 fetch 调后端 OCR API 的最小实现
当图片超过 2MB、需要高精度、或要识别表格/证件时，前端只负责上传，后端跑 PaddleOCR 或商用 API 是更现实的选择。
立即学习“前端免费学习笔记（深入）”；
- 前端用
FileReader读取为 base64 后，封装成标准 JSON：{ "image_base64": "data:image/png;base64,...", "language_type": "zh" } - 后端接口返回结构应统一，避免前端反复适配；推荐字段包括：
words_result（文本数组）、location（四点坐标）、probability（每个字的置信度） - 注意 CORS：若后端没配
Access-Control-Allow-Origin，fetch会静默失败；本地开发可用curl -H "Origin: http://localhost:3000"测试响应头 - 别在前端拼接
data:URI 发送——base64 编码后体积膨胀 33%，改用FormData+blob更省带宽
识别结果渲染和交互容易被忽略的细节
识别完只是第一步，怎么把结果“用起来”才是关键。
- 用
<pre>渲染原始文本时，中文空格会被压缩，加 CSS：white-space: pre-wrap; word-break: break-all; - 如果要高亮原文中某段文字，不能靠字符串匹配——OCR 可能将“口”识别成“ロ”或“囗”，得用返回的
location坐标在 canvas 上画矩形框 - 移动端双指缩放 canvas 后，坐标系会变，所有
location必须乘以当前scale值再绘制，否则框错位 - 用户点击某段识别结果想复制，别只
document.execCommand('copy')（已废弃），改用navigator.clipboard.writeText()并捕获PermissionDenied异常
