如何用前端JavaScript实现图片选/拍照后自动OCR提取文本至输入框？

需求说明 #

希望通过<input type="file" id="file" name="file" accept="image/jpeg,image/jpe,image/jpg,image/png,image/bmp">实现以下功能：调用设备摄像头或选择本地图片，自动执行OCR提取图片中的文本，并将提取结果填入<input type="text">中。询问仅通过JavaScript或相关类库是否可以实现该功能，已知后端技术可以完成，但更倾向于前端纯JS实现。

调试时遇到的错误 #

尝试使用Tesseract.js实现时，出现错误提示：SyntaxError: await is only valid in async functions and the top level bodies of modules。尽管代码中的await已经放在async函数内，仍触发该错误，问题代码如下：

window.addEventListener('load', async () => {
    const fileF = document.getElementById('fileF'),
        txtF = document.getElementById('txtF');

    const worker = await Tessereact.createWorker();
    await worker.loadLanguage('eng');
    await worker.initialize('eng');

    fileF.onchange = async => {
        const res = await worker.recognize(fileF.files[0]);// 此行触发错误
        txtF.value = res.data.text;
    };
});

错误原因：此处的async =>是不完整的箭头函数写法，正确的async箭头函数应该是async () =>，缺少括号导致该函数未被标记为async函数，内部的await因此失效。

最终可用的简化实现 #

已经完成基础可用的版本，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OCR Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.1.1/tesseract.min.js" integrity="sha512-mpQLT7yiRJ06RkhNTYhVnvvr3c71il3h+wEI16ICc+fnFHxrBRoJrMmDJ8iBY04+U/FgTj7xah5Vbltq5pg+aQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <script>
        function myFunction() {
            const fileF = document.getElementById('fileF');
            Tesseract.recognize(
                fileF.files[0],
                'eng',
            ).then(({ data: { text } }) => {
                document.getElementById('textF').value = text;
            })
        }
    </script>
</body>
    <input type="file" id="fileF" accept="Image/jpg, image/gif, image/webp, image/jpeg, image/png" onchange="myFunction()">
    <input type="text" id="textF">
</html>

该版本直接调用Tesseract.js的recognize方法，通过Promise的then回调处理OCR结果，规避了async/await的写法问题；同时引入CDN上的Tesseract.js库，无需额外配置即可使用。

若需要调用设备摄像头，可以在file input标签中添加capture="environment"属性（适用于移动端），或者结合MediaDevices API实现摄像头拍照后获取图片，再传入OCR方法处理。

内容的提问来源于stack exchange，提问作者M. Gar