纯前端 OCR 工具 Tesseract.js

🏷️ 工具

本站地址

纯前端 OCR 工具 Tesseract.js

官方示例代码

import { createWorker } from 'tesseract.js';

(async () => {
  const worker = await createWorker('eng');
  const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  console.log(ret.data.text);
  await worker.terminate();
})();

当前页面代码

因为国内访问 cdn.jsdelivr.net 不太稳定，这里将默认 CDN 的地址从 https://cdn.jsdelivr.net/npm/tesseract.js@5.0.3/dist/tesseract.min.js 改成了本地地址。基于同样的原因，还通过 Tesseract.createWorker 时的 option 参数修改了 workerPath、langPath 和 corePath。如果访问 cdn.jsdelivr.net 很稳定，这几个配置都可以不用改。

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src='./tesseract/5.0.3/tesseract.min.js'></script>

<div class="row">
<div class="col-lg-6">
<h2>图片</h2>
<input type="file" id="fileInput">
<img id="imagePreview" class="my-3" src="">
</div>

<div class="col-lg-6">
<h2>识别内容</h2>
<textarea id="result" rows="15" cols="50" class="form-control mb-3" readonly></textarea>
<div class="input-group mb-3">
  <button type="button" onclick="copyResult()" class="btn btn-primary col-12">复制</button>
</div>
</div>
</div>

<script>
let worker;
document.getElementById('fileInput').addEventListener('change', async function () {
  document.getElementById('result').value = "正在加载 Tesseract ...";
  worker = worker == null ? await Tesseract.createWorker('chi_sim', 1, {
    workerPath: './tesseract/5.0.3/worker.min.js',
    langPath: './tesseract/5.0.3/lang',
    corePath: './tesseract/5.0.3/core',
  }) : worker;
  const file = this.files[0];
  const imagePreview = document.getElementById('imagePreview');
  if (file) {
    imagePreview.src = URL.createObjectURL(file);
    document.getElementById('result').value = "正在识别图片 ...";
    const { data: { text } } = await worker.recognize(imagePreview);
    document.getElementById('result').value = text;
    // await worker.terminate();
  }
});
function copyResult() {
  var result = document.getElementById("result");
  result.select();
  result.setSelectionRange(0, 99999);
  document.execCommand("copy");
  typeof (showTip) === "function" && showTip("已复制到剪贴板！", "info");
}
</script>