内网前端图片识别文字

log远方的远

已于 2024-05-08 15:27:14 修改

阅读量432

点赞数 4

文章标签：前端

于 2024-05-08 15:23:16 首次发布

本文链接：https://blog.csdn.net/weixin_47390278/article/details/138573623

版权

前言

项目环境：内网、vue
版本：“tesseract.js”: “2.1.4”, “vue”: “^3.3.10”,“tesseract.js-core”: “^5.1.0”
识别比较花的图片会很乱建议后端实现，采用后端调用其他官方的api来实现
参考文档：https://www.icodebang.com/article/209042.html

步骤

下包

npm i -S tesseract.js tesseract.js-core

提取包
官方文档

<script>
const { createWorker } = Tesseract;
 const worker = createWorker({
 workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
 langPath: '../lang-data',
 corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
 logger: m =>console.log(m),
 });
 (async () => {
 await worker.load();
 await worker.loadLanguage('eng');
 await worker.initialize('eng');
 const { data: { text } } = await worker.recognize('../images/testocr.png');
 console.log(text);
 await worker.terminate();
 })();
</script>

为什么需要把包提取出来
offline版本相比官方版本区别就在于createWorker的初始化配置项的workerPath、langPath、corePath,将这3个依赖下载到本地项目内是关键。
但是vue应用直接使用如上代码是会找不到路径，更别说npm run build生产环境下没有node_modules的情况。

代码

<template>
  <div id="app">
    <div>
      <h3>可用文档</h3>
      <p><a href="https://www.icodebang.com/article/209042.html">https://www.icodebang.com/article/209042.html</a></p>
      <h3>关键点</h3>
      <pre>
         1.这是离线版<a href="https://github.com/jeromewu/tesseract.js-offline">tesseract.js-offline</a>
         2.canvas也是可以解析的
         3.tesseract.js-offline 需要下载语言包，这个项目只有一个中文包，还有自带的英文包，所以需要下载其他语言包 <a href="https://github.com/naptha/tessdata">语言包地址https://github.com/naptha/tessdata</a>
      </pre>
      <h3>pdf解析</h3>
      <p>请移步到pdf预览</p>
    </div>
    <div style="display: flex;align-items: center;flex-direction: column;">
      <button @click="recognize('text-img')">点击开始识别图片</button>
      <img style="margin-top: 10px;" id="text-img" alt="Vue logo" src="./flie/test.png" />
    </div>
    <pre>{{ text }}</pre>
    <div style="display: flex;align-items: center;flex-direction: column;">
      <button @click="imgToCanvas('test')">图片转canvas</button>
      <button @click="recognize('test')">点击开始识别canvas</button>
      <canvas style="margin-top: 10px;" id="test"></canvas>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { createWorker, PSM, OEM } from "tesseract.js";
const worker = createWorker({
  workerPath: '/lib/tesseract/tesseract.js/dist/worker.min.js',
  corePath: '/lib/tesseract/tesseract.js-core/tesseract-core.wasm.js',
  langPath: '/lib/tesseract/tesseract-lang',  // TODO：prd环境下会报错
  logger: (m) => console.log(m),
})
export default {
  name: "app",
  data () {
    return {
      haveInit: false,
      text: ''
    };
  },
  methods: {
    async recognize (domId) {
      console.time('time:');
      this.text = `开始识别...`
      if (!this.haveInit) {
        await worker.load();
        await worker.loadLanguage("chi_sim");
        await worker.initialize("chi_sim", OEM.LSTM_ONLY);
        await worker.setParameters({
          tessedit_pageseg_mode: PSM.SINGLE_BLOCK,
        });
        this.haveInit = true;
      }

      // const img = document.getElementById("text-img");
      const img = document.getElementById(domId);
      const {
        data: { text },
      } = await worker.recognize(img);
      console.log(text);
      this.text = text;
      console.timeEnd('time:');
    },
    imgToCanvas () {
      // 图片转canvas
      var img = document.getElementById("text-img");
      var canvas = document.getElementById("test");
      var ctx = canvas.getContext("2d");
      // 宽度
      canvas.width = img.width;
      // 高度
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
    }
  },
};
</script>