如何在JavaScript中存储Tesseract.recognize识别的文本值并输出到文本框

步骤1：在HTML中添加文本框元素 #

你可以根据需求选择单行输入框或者多行文本域，给元素设置唯一id方便后续JS选中操作：

<!-- 单行文本输入框 -->
<input type="text" id="resultText" placeholder="识别结果将展示在这里">

<!-- 可选：多行文本域 -->
<textarea id="resultText" rows="5" cols="50" placeholder="识别结果将展示在这里"></textarea>

步骤2：修改原有JS逻辑 #

你代码里的finalText本身已经是回调作用域内的可用变量，如果只在识别成功的回调内使用不需要额外存储；如果需要在全局其他位置调用，可以提前声明全局变量存储值，修改后的完整代码如下：

// 不需要全局使用finalText的话可以删掉这行全局变量声明
let globalFinalText = '';

Tesseract.recognize(
    '../uploads/scanned-images/<?php echo $image_name; ?>',
    'eng',
    { logger: m => console.log(m) }
).then(({ data: { text } }) => {
    const extractedText = text;
    const finalText = extractedText.replace(/[^0-9A-Za-z]/gi, '');
    // 赋值给全局变量，不需要全局调用可以删掉这行
    globalFinalText = finalText;
    // 输出到文本框
    document.getElementById('resultText').value = finalText;
})

注意：请确保HTML文本框的id属性值和JS中document.getElementById传入的参数完全一致，否则会找不到元素导致赋值失败。

内容的提问来源于stack exchange，提问作者Vishal Kumar