【前端OCR】代码,浏览器实现简单OCR识别,tesseract.js

作者：从前慢现在也慢 | 2024-03-14 19:20:08

踩

前端ocr

【需求背景】灵机一动想到能否在浏览器实现OCR，查阅资料后发现可参考内容不多，故给出以下可运行代码。

【使用方法】代码可以在本地编辑器编辑完成后使用浏览器直接打开HTML文件，选择图片上传即可。

【说明】当前配置是简体中文语言包chi_sim，如果需要切换其它语言可以参考官方Github仓库tesseract.js/src/constants/languages.js中的说明。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像OCR Tesseract.js 测试</title>
    <script src="https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js"></script>
</head>
<body>
    <input type="file" id="imageInput" accept="image/*">
    <img id="uploadedImage" style="max-width: 100%; margin-top: 10px; display: none;">
    <div id="result"></div>
 
    <script>
        document.getElementById('imageInput').addEventListener('change', function (e) {
            var file = e.target.files[0];
 
            if (file) {
                var reader = new FileReader();
 
                reader.onload = function (e) {
                    var image = new Image();
                    image.src = e.target.result;
 
                    image.onload = function () {
                        document.getElementById('uploadedImage').src = image.src;
                        document.getElementById('uploadedImage').style.display = 'block';
                        Tesseract.recognize(
                            image,
                            'chi_sim',
                            {
                                logger: info => console.log(info)
                            }
                        ).then(result => {
                            console.log('【识别结果】', result);
                            if (result && result.text) {
                                document.getElementById('result').innerText = result.text;
                            } else {
                                console.error('【错误】无法从识别结果中检索文本');
                            }
                        }).catch(error => {
                            console.error('【错误】识别过程中出错，原因：', error);
                        });
                    };
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/236811