Tesseract.js离线部署报错ReferenceError: Tesseract未定义，求解决方法

阿华AIGC实验室

2026-5-15

修复 "ReferenceError: Tesseract is not defined" 问题

我来帮你一步步排查和解决这个问题：

1. 先修正最明显的拼写错误

你头部的script标签里把src写成了scr，这会导致浏览器根本加载不到tesseract.js文件，自然就找不到Tesseract对象了：

<!-- 错误写法 -->
<script scr="js/tesseract.js"></script>

<!-- 正确写法 -->
<script src="js/tesseract.js"></script>

2. 修正Tesseract初始化的配置问题

你的langPath设置错了，它应该指向语言文件所在的目录，而不是具体的.traineddata.gz文件路径。另外，调整初始化逻辑确保配置正确：

(function() {
  var path = (function() {
    var pathArray = window.location.pathname.split('/');
    pathArray.pop();
    return window.location.origin + pathArray.join("/");
  })();
  
  // 初始化Tesseract时，langPath指向存放语言包的文件夹
  window.Tesseract = Tesseract.create({
    workerPath: path + '/js/worker.js',
    corePath: path + '/js/index.js',
    langPath: path + '/js/' // 这里只需要到目录，不需要具体文件名
  });
})();

3. 确保脚本加载顺序和作用域正确

把初始化代码放在tesseract.js加载完成后执行，最好用DOMContentLoaded事件包裹，避免脚本还没加载就执行初始化：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放你的Tesseract初始化代码
});

按钮触发的代码也要确保是在DOM加载完成后执行，或者放在页面底部，避免找不到UploadAndPreview和ocr_status元素。

4. 验证本地文件路径是否正确

打开浏览器开发者工具（F12），切换到Network标签，刷新页面，检查tesseract.js、worker.js、index.js和eng.traineddata.gz是否都能成功加载（状态码200）。如果有404错误，说明你的路径设置有问题，需要调整path计算逻辑或者文件存放位置。

测试修正后的完整代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Offline Tesseract OCR</title>
  <!-- 修正src拼写 -->
  <script src="js/tesseract.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var path = (function() {
        var pathArray = window.location.pathname.split('/');
        pathArray.pop();
        return window.location.origin + pathArray.join("/");
      })();
      
      console.log('Base path:', path);
      
      window.Tesseract = Tesseract.create({
        workerPath: path + '/js/worker.js',
        corePath: path + '/js/index.js',
        langPath: path + '/js/'
      });
    });
  </script>
</head>
<body>
  <img id="UploadAndPreview" src="test-image.jpg" alt="Test image">
  <div id="ocr_status"></div>
  <button onclick="runOCR()">Run OCR</button>

  <script>
    function runOCR() {
      var img = document.getElementById('UploadAndPreview');
      if (!img) {
        console.error('Image element not found');
        return;
      }
      
      Tesseract.recognize(img)
        .progress(function(result) {
          document.getElementById("ocr_status").innerText = result.status + " (" + (result.progress * 100).toFixed(2) + "%)";
        })
        .then(function(result){
          console.log('OCR Result:', result);
          // 可以在这里把结果显示到页面上
        })
        .catch(function(error) {
          console.error('OCR Error:', error);
          document.getElementById("ocr_status").innerText = 'Error: ' + error.message;
        });
    }
  </script>
</body>
</html>

按照上面的步骤调整后，应该就能解决Tesseract is not defined的错误了。

内容的提问来源于stack exchange，提问作者Roma Fedor