React浏览器环境使用tesseract.js报错init is not a function如何解决？

AI 小北

2026-10-4

问题根因

你调用的Tesseract.init()、Tesseract.setImage()是tesseract.js v2及更早版本的旧API，当前npm默认安装的v4/v5版本已完全重构API，全局导入的Tesseract对象不存在上述方法，是触发报错的直接原因。
额外逻辑问题：浏览器环境不存在Node.js的BufferAPI，你尝试用new Buffer()转码的操作在浏览器端也会触发报错，且你在调用异步识别逻辑后直接同步修改progress为scanned，会导致状态和实际识别进度不匹配。

修复方案

方案1：适配新版tesseract.js API（推荐）

直接用新版提供的静态识别方法，不需要手动初始化、设置图片，代码改动最小：
把onImage函数的代码替换为以下内容：

const onImage = async (failedImages, successImages) => {
  setProgress('scanning')
  try {
    if (successImages.length === 0) return
    // tesseract.js 直接支持传入base64格式图片，无需转Buffer
    const imageBase64 = successImages[0]
    // 直接调用静态recognize方法，参数分别为 图片资源、语言、配置项
    const result = await Tesseract.recognize(
      imageBase64,
      'eng',
      { logger: m => console.log(m) }
    )
    // 识别到的文本内容在result.data.text中
    console.log('识别结果：', result.data.text)
    setProgress('scanned')
  } catch (error) {
    console.log("error in scan: " + error.message)
    setErrorMessage(error.message)
    setProgress('uploadError')
  }
}