简单的ocr图片识别文字

星期八的昨天

于 2024-11-06 10:03:42 发布

阅读量162

点赞数 2

CC 4.0 BY-SA版权

文章标签： ocr javascript 前端

本文链接：https://blog.csdn.net/weixin_49627031/article/details/143560875

<body>
  <h1>Tesseract.js 图片识别示例</h1>
  <input type="file" id="imageUpload" accept="image/*" />
  <div id="result"></div>
  <script src="./tesseract.min.js"></script>
  <script>

    document
      .getElementById("imageUpload")
      .addEventListener("change", function (event) {
        const file = event.target.files[0];
        if (file) {
          console.log(file);
          recognizeImage(file);
        } else {
          alert("请选择一个图片文件");
        }
      });

    //
    async function recognizeImage(file) {
      // const resultDiv = document.getElementById("result");
      // resultDiv.innerHTML = "正在识别...";

      try {
        const result = await Tesseract.recognize(
          file,
          "chi_sim+chi_sim+eng", // 识别语言，可以更换为其他语言
          {
            logger: (m) => console.log(m), // 日志输出
          }
        );

        // const text = result.data.text;
        // resultDiv.innerHTML = `<pre>${text}</pre>`;
        console.log("识别结果:", text);
      } catch (error) {
        resultDiv.innerHTML = "识别失败";
        console.error("Tesseract.js Error:", error);
      }
    }
  </script>
</body>