【前端OCR】如何用paddlejs开发一个属于前端本地的OCR文本识别功能

最新推荐文章于 2025-03-03 17:06:48 发布

爱上大树的小猪

最新推荐文章于 2025-03-03 17:06:48 发布

阅读量1.5k

点赞数 24

文章标签：前端 ocr paddle

本文链接：https://blog.csdn.net/abcd2468sfdsfsd/article/details/145587764

版权

之前出过一篇关于用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就记录到这里，试了几个第三方，单单靠前端开发，也只能依赖于开源的做到这程度了。

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