又要起飞，浏览器居然都可以本地 OCR 啦

前言

PaddleOCR，这是一个由百度开发的开源 OCR（Optical Character Recognition，光学字符识别）工具，它可以用于从图像中识别文本。

PaddleOCR支持多种语言的文本识别，并且能够处理多种场景下的图像。

现在 PaddleOCR 也支持在浏览器中直接运行啦。

FastDeploy 介绍

FastDeploy 是一款全场景、易用灵活、极致高效的AI推理部署工具， 支持云边端部署。

提供超过 🔥160+ Text，Vision， Speech和跨模态模型开箱即用的部署体验，并实现🔚端到端的推理性能优化。

包括 物体检测、字符识别（OCR）、人脸、人像扣图、多目标跟踪系统、NLP、Stable Diffusion文图生成、TTS 等几十种任务场景，满足开发者多场景、多硬件、多平台的产业部署需求。

安装

克隆仓库

git clone https://github.com/PaddlePaddle/FastDeploy/

打开 web_demo 目录

cd examples/application/js/web_demo/

安装依赖并运行

yarn && yarn dev

打开该地址即可看到demo

运行效果

主界面

文本识别

代码

项目中关于 OCR 使用的代码非常简单，，如下：

import * as ocr from "@paddle-js-models/ocr";
onMounted(async () => {
  canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
  await ocr.init();
  isLoadingModel.value = false;
});
const predict = async () => {
  const img = document.getElementById("raw-img") as HTMLImageElement;
  const res = await ocr.recognize(img, { canvas: canvas.value });
  console.log(res);
  if (res.text?.length) {
    // 页面展示识别内容
    result.value = res.text.reduce((total, cur) => total + `<p>${cur}</p>`);
  }
};

可见已经封装得十分地完整和简便了。

总结

本文对 web 中直接使用 OCR 的方法进行了简述，但并未对实际使用和具体实现原理等进行分析。

单从效果上看，已经接本上达到了可用级别。

后面我们再接着深入讨论原理和应用。