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

最新推荐文章于 2024-05-10 01:00:00 发布

梦想编程家

最新推荐文章于 2024-05-10 01:00:00 发布

阅读量670

点赞数 7

文章标签：前端 ocr javascript

本文链接：https://blog.csdn.net/qq_41560688/article/details/136088288

版权

【需求背景】灵机一动想到能否在浏览器实现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>