前端开发攻略---使用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>
相关推荐
weixin_399380699 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说30 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥31 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript
随笔记1 小时前
uniapp开发的小程序输入框在ios自动填充密码,如何欺骗苹果手机不让自动填充
前端·ios·app