前端实现图片识别文字

作者: 小枫枫

临枫的项目经历分享给你们啦~

扫码交朋友

标签:

特别声明:文章有少部分为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

需求:拍照识别核酸码是否在有效时间内(72小时内)

 

 

效果图:

 

 

主要代码 App.vue代码  (demo在下面)

<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目录内  如图:

npm i

npm run serve

启动项目

emmmm 不过最后发现云服务商提供的文字识别更好用 不过按次收费; 可是呢 关于核酸码的是免费的!!!13  10

比如百度智能云的 https://cloud.baidu.com/doc/OCR/s/Nksg89dkc

本文最后更新于2022-8-10,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏

作者: 小枫枫, 转载或复制请以 超链接形式 并注明出处 小枫枫不疯喔
原文地址: 《前端实现图片识别文字》 发布于2022-8-10

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏