前端开发攻略---使用ocr识别图片进行文字提取功能

1、引入资源

通过链接引用

html 复制代码
 <script src="https://cdn.bootcdn.net/ajax/libs/tesseract.js/5.1.0/tesseract.min.js"></script>

npm或其他方式下载

html 复制代码
npm i tesseract

2、示例

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://cdn.bootcdn.net/ajax/libs/tesseract.js/5.1.0/tesseract.min.js"></script>
  <body>
    <img src="./en.png" alt="" />
    <button onclick="orcBtn1()">识别英文</button>
    <hr />
    <img src="./zn.png" alt="" />
    <button onclick="orcBtn2()">识别中文</button>
    <hr />
    <img src="./1.png" alt="" />
    <button onclick="orcBtn3()">识别中英文</button>
    <hr />
  </body>
  <script>
    const btn = document.querySelector('button')
    function orcBtn1() {
      Tesseract.recognize('./en.png').then(res => {
        console.log(res.data.text)
      })
    }
    function orcBtn2() {
      Tesseract.recognize('./zn.png', 'chi_sim').then(res => {
        console.log(res.data.text)
      })
    }
    function orcBtn3() {
      Tesseract.recognize('./1.png', 'eng+chi_sim').then(res => {
        console.log(res.data.text)
      })
    }
  </script>
</html>
相关推荐
码上成长2 分钟前
qiankun 微前端完全入门指南 - 从零到精通
前端
HuangYongbiao3 分钟前
Rspack Tree-Shaking 原理:Rust 让 Tree-Shaking 更彻底?
前端
Boale_H13 分钟前
前端流水线连接npm私有仓库
前端·npm·node.js
yoyoma19 分钟前
一文搞懂浏览器垃圾回收机制:从原理到面试答题全攻略
前端·javascript
HuWentao20 分钟前
如何创建自我更新的通用项目脚本
前端·flutter
不一样的少年_23 分钟前
女朋友被链接折磨疯了,我写了个工具一键解救
前端·javascript·浏览器
Zyx200741 分钟前
CSS 超级武器:Stylus 与 Flexbox 强强联手,打造极致响应式动画界面(上篇)
前端·css
烛阴1 小时前
超越面向对象:用函数式思维重塑你的Lua代码
前端·lua
微知语1 小时前
Cell 与 RefCell:Rust 内部可变性的双生子解析
java·前端·rust
雨过天晴而后无语1 小时前
Windchill10+html使用Lightbox轻量化wizard的配置
java·前端·html