【前端OCR】如何用paddlejs开发一个属于前端本地的OCR文本识别功能
之前出过一篇关于用tesseract纯前端实现文本识别功能的文档，经测试之后，用是能用，但识别准确率并不高，而且耗时也相对比较久。
于是又找了一个paddlejs做开发测试，但是整体上来说，其实两个差不多。而且初始化过程还会相对久些，如图
下面简单介绍下关于paddlejs的一些信息和基础Demo吧。
官方文档：https://paddlejs.baidu.com/
PaddleJS 是百度开源的一个基于PaddlePaddle模型的Web端推理框架，它允许开发者在浏览器中直接运行深度学习模型，无需任何额外的安装或配置。通过使用PaddleJS，您可以轻松地将训练好的PaddlePaddle模型转换为可以在Web页面上执行的形式，从而实现在客户端进行图像识别、自然语言处理等多种AI功能。
主要特点
- 跨平台支持：由于PaddleJS运行于浏览器环境中，因此它可以无缝支持所有现代浏览器，包括桌面和移动设备上的浏览器，这使得开发的应用程序具有极高的可移植性。
- 高效性能：利用WebAssembly技术和GPU加速（通过WebGL），PaddleJS能够在保持高性能的同时，提供流畅的用户体验。
- 易用性：PaddleJS提供了简单易用的API，使开发者可以方便地加载模型并执行推理任务。同时，它还支持从PaddlePaddle到PaddleJS模型的转换工具，简化了模型部署流程。
- 安全性：所有的计算都在用户的本地设备上完成，这意味着数据不需要上传到服务器，既保护了用户隐私，也减少了网络传输带来的延迟。
使用场景
- 图像分类与检测：如人脸识别、物体识别等。
- 自然语言处理：例如文本分类、情感分析等。
- 语音识别与合成：虽然目前主要集中在视觉和NLP领域，但未来也可能拓展至音频处理。
如何使用
- 准备模型：首先需要有一个训练好的PaddlePaddle模型，然后使用官方提供的转换工具将其转换成适用于PaddleJS的格式。
- 集成到项目：可以通过npm安装PaddleJS库，或者直接引入在线资源链接。之后就可以按照文档说明加载模型，并对输入数据执行预测。
- 执行推理：准备好输入数据后，调用相应API执行推理，并根据返回的结果做进一步处理。
其中：@paddlejs-models/ocr 是 PaddleJS 提供的一个用于光学字符识别（OCR）的预训练模型库。它使得开发者可以在浏览器环境中直接进行文本检测和识别，无需服务器端的支持。
@paddlejs-models/ocrdet 是 PaddleJS 提供的一个专注于文本检测的预训练模型库，适用于在浏览器环境中进行文本区域的检测。它通常用于从图像中定位文本的位置，是实现完整 OCR（光学字符识别）流程的一部分，专门负责“检测”步骤。
Vue框架下Demo展示区域：
npm安装@paddlejs-models/ocr
npm install @paddlejs-models/ocr
或者在 HTML 文件中直接引用 CDN 链接：
<script src="https://unpkg.com/@paddlejs-models/ocr"></script>
同时安装@paddlejs-models/ocrdet（可装可不装，按需）
npm install @paddlejs-models/ocrdet
如果安装下载不成功，那么直接访问这位开发同仁提供的demo代码：https://github.com/Lovely-Pig/PaddleOCR-Paddlejs-Vue-Demo
拉下来后直接npm install就行，而页面的实际使用和开发可以查看下面代码：
下面是一个基于Vue的完整页面案例代码
<template>
<div class="hello">
<!-- 文件上传控件 -->
<input type="file" accept="image/*" @change="onImageChange" />
<!-- 图片预览 -->
<img
v-if="imageUrl"
:src="imageUrl"
alt="Preview"
style="max-width: 300px; margin-top: 20px"
/>
<!-- OCR识别按钮 -->
<button @click="performOCR" style="margin-top: 20px">开始识别</button>
<!-- 日志输出区域 -->
<div v-if="log.length">
<div>日志：</div>
<div v-for="(item, index) in log" :key="index">{{ item }}</div>
</div>
<!-- 耗时展示 -->
<div v-if="times.length">
<div>耗时：</div>
<div v-for="(time, index) in times" :key="index">
{{ time.label }}: {{ time.duration }} ms
</div>
</div>
<!-- 识别结果展示 -->
<div>
<div>识别结果：</div>
<div>{{ result }}</div>
</div>
</div>
</template>
<script>
import * as ocr from "@paddlejs-models/ocr";
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App with OCR",
imageFile: null,
imageUrl: "",
result: null,
log: [],
times: [],
startTime: 0,
initTime: 0,
endTime: 0,
first: false,
};
},
methods: {
onImageChange(event) {
this.imageFile = event.target.files[0];
if (this.imageFile) {
this.imageUrl = URL.createObjectURL(this.imageFile); // 创建预览图片的URL
this.log.push("图片已加载");
}
},
async performOCR() {
this.log.push("点击了开始识别按钮");
this.startTime = performance.now(); // 记录开始时间
await ocr
.init()
.then(() => {
// 初始化OCR模型
this.initTime = performance.now(); // 记录模型初始化完成的时间
this.log.push("OCR模型初始化完成，开始识别...");
const img = new Image();
img.src = this.imageUrl;
img.onload = async () => {
try {
const results = await ocr.recognize(img); // 使用recognize方法执行OCR识别
this.endTime = performance.now(); // 记录识别完成的时间
console.log("OCR识别完成", results);
this.log.push("OCR识别完成");
this.log.push(
`识别结果: ${JSON.stringify(results.text || "未识别到")}`
);
const prefixes = "783|784|731";
const regex = new RegExp(`(?:\D|^)(${prefixes})\d{10}`, "g");
// 用于存放匹配成功的下标
const matchedItems = [];
// 遍历数组并检查每个元素
results.text.forEach((text, index) => {
if (regex.test(text)) {
matchedItems.push({ index: index, content: text });
}
});
// 创建描述匹配下标的文本
let outputText;
if (matchedItems.length > 0) {
outputText = `在识别结果中，以下结果符合条件: `;
matchedItems.forEach((item) => {
outputText += `${item.content}\n`;
});
} else {
outputText = "在识别结果中，没有找到符合的。";
}
this.result = outputText || "未识别到";
// 计算并记录耗时
this.times = [
{
label: "模型初始化耗时",
duration: this.initTime - this.startTime,
},
{
label: "识别过程耗时",
duration: this.endTime - this.initTime,
},
{ label: "总耗时", duration: this.endTime - this.startTime },
];
} catch (error) {
this.log.push(`发生错误: ${error.message}`);
}
};
})
.catch((error) => {
this.log.push(`初始化OCR模型失败: ${error.message}`);
});
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div {
font-size: 12px;
}
input[type="file"],
button {
margin-top: 20px;
}
</style>
在这里加入了一些从识别结果中，正则提取到自己需要的结果，要注意识别出来的是一个文本数组，而且不支持竖向识别。
OCR就记录到这里，试了几个第三方，单单靠前端开发，也只能依赖于开源的做到这程度了。
想要更好的效果，去付费吧。省时省力还好用。