什么！纯前端也能识别图片中的文案、还支持100多个国家的语言

在传统认知中，文字识别(OCR)通常需要后端服务器的支持，但现代前端技术已经突破了这个限制。本文将介绍如何使用纯前端JavaScript库Tesseract.js实现强大的OCR功能，直接在浏览器中识别图片中的文字，并支持100多种语言。

什么是Tesseract.js？

Tesseract.js是流行的开源OCR引擎Tesseract的JavaScript版本，它允许开发者直接在浏览器或Node.js环境中执行文字识别任务，无需依赖其他后端服务。Tesseract.js 还具备以下特点：

纯前端实现： 所有处理都在浏览器中完成，保护用户隐私

多语言支持： 可识别100多种语言的文字

高性能： 利用WebAssembly加速处理速度

易用性： 简单的API接口，快速集成到项目中

一、首先创建一个vue项目和安装相关依赖

pnpm create vite vue3-tesseractjs

cd vue3-tesseractjs

pnpm install

pnpm run dev

二、安装tesseract.js

pnpm install tesseract.js

三、编写识别图片中文案的代码

js 复制代码

<template>
  <div>识别出的文案： {{ text }}</div>
</template>

<script setup>
import { ref } from "vue";
import { createWorker } from "tesseract.js";
import img from "./assets/images/china-text.png";

const text = ref("");
(async () => {
  const worker = await createWorker("chi_sim"); //  语言标识 chi_sim 代表简体中文
  const ret = await worker.recognize(img); // 添加识别图片图片的路径
  console.log(ret.data.text); // 打印识别文案的结果
  text.value = ret.data.text; // 将识别的结果显示到页面上
  await worker.terminate(); // 在确定不再需要 Worker 时立即调用 terminate()
})();
</script>

<style scoped></style>

识别结果：

这是原图片

可以看到使用tesseract.js 实现识别图片中的文案非常简单：

导入tesseract.js
创建worker 并传入语言标识
使用recognize 方法添加需要识别的图片路径，并通过该方法的返回值的到结果
我们需要的识别出来的文案在recognize 返回出来的结果的data属性的text属性上
通过terminate 方法停止worker 以节省内存和性能消耗，再确认后面没有其他的识别的时候调用该方法

四、适配多个国家的语言

第一种写法数组写法：

js 复制代码

const worker = await createWorker(["eng", "chi_sim"]); //  一段文案中可能有英文和中文两种语言的情况

第二种写法，字符串写法：

js 复制代码

const worker = await createWorker("eng+chi_sim"); //  一段文案中可能有英文和中文两种语言的情况

语言标识可以查看官方文档： tesseract-ocr.github.io/tessdoc/Dat... 这里列出了可以识别的100多个国家的语言标识

五、添加识别的进度条

js 复制代码

<template>
  <div class="wraper">
    <ElButton @click="imgToText" type="primary">开始识别</ElButton>
    <div class="text-wraper">识别出的文案： {{ text }}</div>
    <ElProgress
      :text-inside="true"
      :stroke-width="26"
      :percentage="percentage"
    ></ElProgress>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { createWorker } from "tesseract.js";
import img from "./assets/images/china-text.png";
import { ElProgress, ElButton } from "element-plus";
import "element-plus/es/components/progress/style/css";
import "element-plus/es/components/button/style/css";

const text = ref("");
const percentage = ref(0);
const imgToText = async () => {
  const worker = await createWorker("eng+chi_sim", 1, {
    logger: (m) => {
      console.log(m);
      if (m.status === "recognizing text") {
        percentage.value = parseInt(m.progress * 100);
      }
    },
  }); //  一段文案中可能有英文和中文两种语言的情况
  const ret = await worker.recognize(img); // 添加识别图片图片的路径
  console.log(ret.data); // 打印识别文案的结果
  text.value = ret.data.text; // 将识别的结果显示到页面上
  await worker.terminate(); // 在确定不再需要 Worker 时立即调用 terminate()
};
</script>

<style scoped>
.wraper {
  min-width: 800px;
}
.text-wraper {
  padding: 60px 0;
}
</style>

运行效果：

由上面可以看出:

实现识别进度条功能主要通过createWorker 的第三个参数的logger 函数来实现的，logger的参数中m.progress 代表了进度的多少，但是需要注意的是先先要判断下状态为recognizing text，否则的话你会看到进度条先变成100%，再从0%到100%.
这里进度条的实现运用了element-plus,所以需要先执行pnpm install element-plus
为了看效果，将之前的立即执行改成了点击后执行

六、添加input, type="file" 选择文件（优化）

细心的同学可能会发现一个问题我们之前的代码是将图片写死的，真实项目中肯定是不能这样的，一般都是选择文件来识别。所以我们这里来添加下选择文件识别。具体代码如下：

js 复制代码

<template>
  <div class="wraper">
    <input @change="imgToText" type="file" />
    <div class="text-wraper">识别出的文案： {{ text }}</div>
    <ElProgress
      :text-inside="true"
      :stroke-width="26"
      :percentage="percentage"
    ></ElProgress>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { createWorker } from "tesseract.js";
import { ElProgress } from "element-plus";
import "element-plus/es/components/progress/style/css";

const text = ref("");
const percentage = ref(0);
const imgToText = async (e) => {
  const worker = await createWorker("eng+chi_sim", 1, {
    logger: (m) => {
      console.log(m);
      if (m.status === "recognizing text") {
        percentage.value = parseInt(m.progress * 100);
      }
    },
  }); //  一段文案中可能有英文和中文两种语言的情况
  console.log(e, "--e");
  const ret = await worker.recognize(e.target.files[0]); // 添加识别图片图片的路径
  console.log(ret.data); // 打印识别文案的结果
  text.value = ret.data.text; // 将识别的结果显示到页面上
  await worker.terminate(); // 在确定不再需要 Worker 时立即调用 terminate()
};
</script>

<style scoped>
.wraper {
  min-width: 800px;
}
.text-wraper {
  padding: 60px 0;
}
</style>

主要有三个点：

将之前的我ElButton改成了input标签且type="file"
将之前的写死的图片改成了e.target.files[0]

来看运行效果：

七、总结

本篇主要分享了使用Tesseract.js 库实现图片中的文案，包括以下极大核心：

如何处理一张图片中同时有多个语言的情况
如何添加识别进度条
将写死的图片改成可以选择的图片

本篇就分享到这里了，感谢收看

什么！纯前端也能识别图片中的文案、还支持100多个国家的语言

什么是Tesseract.js？

一、 首先创建一个vue项目和安装相关依赖

二、 安装tesseract.js

三、 编写识别图片中文案的代码

四、适配多个国家的语言

五、添加识别的进度条

六、添加input, type="file" 选择文件（优化）

七、总结

一、首先创建一个vue项目和安装相关依赖

二、安装tesseract.js

三、编写识别图片中文案的代码