什么是 OCRAD.js？
OCRAD.js 是由 Kevin Kwok 基于 Antonio Diaz Diaz 的 Ocrad 项目移植而来，通过 Emscripten 编译成约 1MB 的纯 JavaScript 脚本。它不依赖大型训练数据，适合在浏览器端运行，实现图像文字识别功能。
核心优势与特点
纯前端运行：所有 OCR 算法都在浏览器执行，无需服务器支持。
轻量体积：约 1MB 大小，加载快，适合前端项目集成。
高性能处理：相比 GOCR.js，OCRAD.js 启动更快，能在更短时间内处理图像。
灵活输入类型：OCRAD 接口支持 canvas 元素、Context2D 对象或 ImageData 类型作为输入。
OCRAD.js 的基本使用步骤
引入 ocrad.js
<script src="ocrad.js"></script>
这将提供全局函数 OCRAD。
准备图像输入
要识别的内容应先绘制至 Canvas。如果直接传入 <img> 会失败，应将图像绘制到 canvas 后，再处理。
调用 OCRAD
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.drawImage(imageElement, 0, 0);
const resultText = OCRAD(canvas);
或者：
const resultText = OCRAD(context);或传入 ImageData 实例，识别成功即返回字符串。
处理跨域问题
如果图像来自外部域名，Canvas 会被“污染”，导致无法读取 getImageData。建议：
- 将图片放到同源服务器。
- 或使用 image.crossOrigin = 'anonymous' 且服务器允许 CORS。
- 本地开发使用服务器环境，避免直接 file:// 模式。
OCRAD.js 完整示例
<!doctype html>
<html>
<head>
<script src="ocrad.js"></script>
</head>
<body>
<img id="img" src="text.png" alt="to recognize">
<canvas id="canvas"></canvas>
<pre id="output"></pre>
<script>
const img = document.getElementById('img');
const canvas = document.getElementById('canvas');
const output = document.getElementById('output');
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const text = OCRAD(canvas);
output.textContent = text;
};
img.crossOrigin = 'anonymous';
</script>
</body>
</html>
以上代码将图像绘制到 Canvas，并调用 OCRAD 执行识别，结果显示在页面上。
应用场景
离线客户端 OCR：如图片文本提取工具、浏览器插件、笔记识别应用等，无需网络。
快速原型开发：用于实现简单批量识别功能，部署快速。
教育或演示场合：展示 OCR 原理或前端图像处理流程。
局限性与对比
OCRAD.js 的准确度不及基于神经网络的 Tesseract.js，也不支持多语言。Tesseract.js 支持 100 多种语言和丰富的图像预处理功能，但体积大、性能相对低，特别是低端设备使用时体验较差。因此：
- 小体量、轻量、单一语言项目适合使用 OCRAD.js。
- 多语言、高准确度需求或复杂文档处理建议考虑 Tesseract.js 或云端 OCR 服务。
总结
OCRAD.js 是一款简单、轻量且适合前端快速部署的 OCR JavaScript 库，它提供纯客户端图像识别能力，适用于基础 OCR 场景。通过 canvas 绘图和 OCRAD 调用，可以轻松实现文本提取功能，但在准确性与多语言支持方面有限。项目选择时，应结合体积、性能与识别需求做权衡。