JavaScript识别图片文字

小怪兽_v

已于 2023-12-28 08:37:10 修改

阅读量928

点赞数 7

文章标签： javascript 开发语言 ecmascript

于 2023-12-27 16:40:50 首次发布

本文链接：https://blog.csdn.net/qq_49080170/article/details/135249909

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src='https://unpkg.com/tesseract.js@v2.0.0-beta.1/dist/tesseract.min.js'></script>
</head>

<body>
  <img src="a1.png" id="img" style="width: 400px; height: auto;">
  <button onclick="start()">识别文字</button>
  <div id="content" contenteditable="true"></div>

  <input type="file" id="uploader">

  <script>
    async function start () {
      const img = document.getElementById('img')
      const content = document.getElementById('content')

      const { data: { text } } = await Tesseract.recognize(img, 'chi_sim', {
        langPath: '',
        logger: m => console.log(m),
      })
      content.innerText = text
    }

    // 获取文件上传输入框元素
    let uploader = document.getElementById("uploader")
    let file = ''
    // 绑定change事件监听器
    uploader.addEventListener("change", function (event) {
      // 获取所选择的文件
      file = event.target.files[0]
      // 在这里可以执行你希望处理的操作，比如读取文件内容、上传文件等
      recognize()
    })
    const recognize = async () => {
      const { data: { text } } = await Tesseract.recognize(file, 'chi_sim', {
        langPath: '',
        logger: m => console.log(m)
      })
      content.innerText = text
    }

  </script>
</body>

</html>