JavaScript中如何将用户选择的文件传入Tesseract.js的recognize识别函数

第一步：修复HTML代码 #

先给提交按钮添加唯一id，同时给文件选择框增加图片类型限制，避免用户上传非图片文件导致识别失败，修改后的HTML如下：

<html>
<head>
    <script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
    <script src = "script.js"></script>
</head>
<body>
    <input type="file" name="file" id="fileInput" accept="image/*">
    <button id="submitBtn">提交识别</button>
</body>
</html>

第二步：修改JS代码 #

给提交按钮绑定点击事件，获取用户选中的文件对象后直接传入Tesseract.recognize即可，Tesseract.js原生支持浏览器环境的File对象作为识别源，无需额外转换路径。修改后的JS代码如下：

// 获取页面元素
const fileInput = document.getElementById('fileInput');
const submitBtn = document.getElementById('submitBtn');

// 绑定提交点击事件
submitBtn.addEventListener('click', () => {
    // 获取用户选中的第一个文件
    const selectedFile = fileInput.files[0];
    // 校验是否选中文件
    if (!selectedFile) {
        console.log('请先选择需要识别的图片');
        return;
    }
    // 替换固定路径为用户选中的文件对象
    Tesseract.recognize(
        selectedFile,
        "eng",
        { 
            logger: m => console.log(m) 
        }
    )
    .catch (err => {
        console.error(err);
    })
    .then(result => {
        // 直接输出识别到的文本内容
        console.log('图片文本识别结果：', result.data.text);
    })
})

核心逻辑说明 #

• 类型为file的input元素的files属性是类数组的FileList对象，用户选中的单个文件对应索引为0的元素，是浏览器标准File对象
• Tesseract.js的recognize方法在浏览器环境下支持直接传入File/Blob对象，不需要转换为本地路径或者base64格式

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