无锡市住房和城乡建设部网站近期的重大新闻

之前出过一篇关于用tesseract纯前端实现文本识别功能的文档，经测试之后，用是能用，但识别准确率并不高，而且耗时也相对比较久。

于是又找了一个paddlejs做开发测试，但是整体上来说，其实两个差不多。而且初始化过程还会相对久些，如图

下面简单介绍下关于paddlejs的一些信息和基础Demo吧。

官方文档：https://paddlejs.baidu.com/

PaddleJS 是百度开源的一个基于PaddlePaddle模型的Web端推理框架，它允许开发者在浏览器中直接运行深度学习模型，无需任何额外的安装或配置。通过使用PaddleJS，您可以轻松地将训练好的PaddlePaddle模型转换为可以在Web页面上执行的形式，从而实现在客户端进行图像识别、自然语言处理等多种AI功能。

主要特点

1. 跨平台支持：由于PaddleJS运行于浏览器环境中，因此它可以无缝支持所有现代浏览器，包括桌面和移动设备上的浏览器，这使得开发的应用程序具有极高的可移植性。
2. 高效性能：利用WebAssembly技术和GPU加速（通过WebGL），PaddleJS能够在保持高性能的同时，提供流畅的用户体验。
3. 易用性：PaddleJS提供了简单易用的API，使开发者可以方便地加载模型并执行推理任务。同时，它还支持从PaddlePaddle到PaddleJS模型的转换工具，简化了模型部署流程。
4. 安全性：所有的计算都在用户的本地设备上完成，这意味着数据不需要上传到服务器，既保护了用户隐私，也减少了网络传输带来的延迟。

使用场景

• 图像分类与检测：如人脸识别、物体识别等。
• 自然语言处理：例如文本分类、情感分析等。
• 语音识别与合成：虽然目前主要集中在视觉和NLP领域，但未来也可能拓展至音频处理。

如何使用

1. 准备模型：首先需要有一个训练好的PaddlePaddle模型，然后使用官方提供的转换工具将其转换成适用于PaddleJS的格式。
2. 集成到项目：可以通过npm安装PaddleJS库，或者直接引入在线资源链接。之后就可以按照文档说明加载模型，并对输入数据执行预测。
3. 执行推理：准备好输入数据后，调用相应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" /><!-- 图片预览 --><imgv-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); // 创建预览图片的URLthis.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就记录到这里，试了几个第三方，单单靠前端开发，也只能依赖于开源的做到这程度了。

想要更好的效果，去付费吧。省时省力还好用。