前端实现图片识别文字

需求：拍照识别核酸码是否在有效时间内（72小时内）

效果图：

<template>
  <div id="app">
    <input type="file" @change="changeFile" id="uploadFile" />
    <button class="btn" v-on:click="parsing">解析</button>
    <br />
    <img id="text-img" v-if="src" alt="Vue logo" :src="src" />
    <br>
    <br>
    <br>
    <br>
    <p style="width: 400px;margin: 0 auto;">{{textRes}}</p>
  </div>
</template>

<script>
  /* eslint-disable */
  import { createWorker } from "tesseract.js";

  export default {
    name: "app",
    data() {
      return {
        textRes:"",
        src: require("./assets/qrcode.jpg"),
      };
    },
    methods: {
      async parsing() {
        this.textRes = "";
        const worker = createWorker({
          workerPath: "./js/worker.min.js",
          langPath: "./js/lang-data",
          corePath: "./js/tesseract-core.wasm.js",
          logger: (m) => console.log(m),
        });
        const img = document.getElementById("text-img");
        await worker.load();
        await worker.loadLanguage("chi_sim");
        await worker.initialize("chi_sim");
        const {
          data: { text },
        } = await worker.recognize(img);
        console.log(text.replace(/\s*/g, ""));
        let currentTime = text.match(
          /[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d/
        )?.[0];
        let cutOffFactor = ["核酸检测结果", "核酸检测", "阴性", "阳性"];
        let startIndex =
          text.indexOf(cutOffFactor[0]) == -1
            ? text.indexOf(cutOffFactor[1]) - 10
            : text.indexOf(cutOffFactor[0]) - 10;
        let str = text.substring(startIndex).replace(/\[|]|\s*/g, "");
        let health =
          str.indexOf(cutOffFactor[2]) !== -1
            ? cutOffFactor[2]
            : str.indexOf(cutOffFactor[3]) !== -1
            ? cutOffFactor[3]
            : "";
        let healthIndex =
          str.indexOf(cutOffFactor[2]) !== -1
            ? str.indexOf(cutOffFactor[2])
            : str.indexOf(cutOffFactor[1]);
        str = str.substring(0, healthIndex + 2);
        let pastTimeRes = str.match(/\d+/);
        let dateUnit = str.match(/小时内/)?.[0] || str.match(/天内/)?.[0];
        let textRes = {
          currentTime,
          health,
          pastTime: pastTimeRes?.[0],
          dateUnit,
          value: str.substring(pastTimeRes?.index),
        };
        await worker.terminate();
        console.log(textRes);
        this.textRes = textRes
      },
      changeFile(e) {
        let file = e.target.files[0];
        var windowURL = window.url || window.webkitURL;
        // file转换文件流
        let src = windowURL.createObjectURL(file);
        this.src = src;
      },
    },
  };
</script>

<style>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  #text-img {
    width: 200px;
  }
  .btn {
    cursor: pointer;
    width: 108px;
    height: 44px;
    padding: 0;
    background: 0 0;
    background-color: #4e6ef2;
    font-size: 17px;
    color: #fff;
    box-shadow: none;
    font-weight: 400;
    border: none;
    outline: 0;
  }
</style>

Demo：

img-transition-text.zip

中文语言包：

下载并解压我.zip

然后把语言包放入img-transition-text\public\js\lang-data目录内如图：