VUE识别图片文字OCR(tesseract.js)

效果:1:

效果图2:

一、安装tesseract.js

npm i tesseract.js

二、静态页面实现

<template>
  <div>
    <div style="marginTop:100px">
      <input @change="handleChage" type="file" id="image-input" accept="image/*">
      <br />
      <button @click="processImage">提取文字</button>
      <div id="show-picture"></div>
    </div>
    <div>
      <p style="color:red">提取到的内容:</p>
      <span id="result"></span>
    </div>
  </div>
</template>

三、选择图片显示在页面上

<script setup>
    
    import { createWorker } from 'tesseract.js'; 

    
    //将选择的图片显示在页面上
    const handleChage = () => {
       
      document.getElementById("result").innerText = ""
      let getUserPhoto = document.getElementById("image-input");


        //创建一个FileReader对象,用于读取图像文件
      let reader = new FileReader();

        //读取第一个文件,并转为base64格式
      reader.readAsDataURL(getUserPhoto.files[0]);

        //只显示第一个图片
      reader.onload = function () {
        let image = document.createElement("img");
        image.width = "400";
        
        //设置图片
        image.src = reader.result;
        let showPicture = document.getElementById("show-picture");
        while (showPicture.firstChild) {
          showPicture.removeChild(showPicture.firstChild);
        }
        showPicture.appendChild(image)
      };
    }

<script>

四、核心代码,功能实现

const processImage = () => {
  let worker;
  let input = document.getElementById('image-input');
  if (input.files && input.files[0]) {
    let reader = new FileReader();
    reader.onload = async function (e) {
      
      //创建一个Worker线程,参数为需要识别的语言, chi_sim代表简体中文
      worker = await createWorker('chi_sim')
      worker.recognize(e.target.result)
        .then(result => {

          // 提取出的文字,给元素赋值
          let extractedText = result.data.text;
          document.getElementById('result').innerText = extractedText;

        })
        .catch(error => {
          console.error('Error:', error);
        }).finally(() => {
          if (worker)
            
            // 清除当前Worker线程
            worker.terminate();

        })
    };
    reader.readAsDataURL(input.files[0]);
  }
}

五、注:只能识别标准文本图片,并且会有误差,识别别的的图片效果会差很多

最近更新

  1. TCP协议是安全的吗?

    2024-04-23 00:50:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-23 00:50:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-23 00:50:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-23 00:50:02       18 阅读

热门阅读

  1. STM32 CAN发送邮箱和接收FIFO

    2024-04-23 00:50:02       9 阅读
  2. 若依学习记录

    2024-04-23 00:50:02       12 阅读
  3. 聚类算法的学习

    2024-04-23 00:50:02       11 阅读
  4. uniapp微信小程序蓝牙连接与设备数据对接

    2024-04-23 00:50:02       12 阅读
  5. 《1w实盘and大盘基金预测 day25》

    2024-04-23 00:50:02       11 阅读
  6. 笨蛋学C++【C++基础第三弹】

    2024-04-23 00:50:02       11 阅读
  7. element UI 走马灯 initial-index动态赋值 不生效问题

    2024-04-23 00:50:02       12 阅读
  8. 【华为OD机试】最长连续手牌【C卷|200分】

    2024-04-23 00:50:02       9 阅读
  9. 金融风险评估都有什么模型

    2024-04-23 00:50:02       13 阅读
  10. iOS(Object C) 冒泡排序

    2024-04-23 00:50:02       14 阅读
  11. Android R 展讯平台关机充电动画横屏显示修改

    2024-04-23 00:50:02       13 阅读
  12. PyTorch: 点燃深度学习革新之火

    2024-04-23 00:50:02       16 阅读