调用Umi-OCR的API配合PHP+HTML写了简单图片识别文字

精易如家酒店ジ · 发表于 2024-6-28 21:06:23

本帖最后由精易如家酒店ジ于 2024-6-28 21:10 编辑

Umi-OCR：https://bbs.125.la/forum.php?mod=viewthread&tid=14825440&highlight=umi
Umi-OCR开发文档：https://github.com/hiroi-sora/Umi-OCR/blob/main/docs/README_HTTP.md#1-%E5%9B%BE%E7%89%87ocrbase64-%E8%AF%86%E5%88%AB%E6%8E%A5%E5%8F%A3

截图OCR：打开这一页后，就可以用快捷键唤起截图，识别图中的文字。

左侧的图片预览栏，可直接用鼠标划选复制。
右侧的识别记录栏，可以编辑文字，允许划选多个记录复制。
也支持在别处复制图片，粘贴到Umi-OCR进行识别。

用PHP+HTML写了一个前端识别，通过api/ocr的接口进行本地HTTP进行图片识别文字。·可以把Umi放在服务器，然后把“http://127.0.0.1:1224/api/ocr”换成你的服务器地址+端口。
VX截图_20240628210725.png

需要把主机的地址选择任何可用地址！
VX截图_20240628210519.png

[PHP] 纯文本查看 复制代码

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        h1 {
            color: #333;
        }

        label {
            display: block;
            margin: 20px auto;
            cursor: pointer;
        }

        #imageDisplay {
            max-width: 300px;
            max-height: 300px;
            margin: 10px auto;
        }

        #fileInput {
            display: none;
        }

        #textOutput {
            margin: 20px auto;
            padding: 10px;
            width: 80%;
            max-width: 500px;
            resize: none;
        }

        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <h1>图像文字识别</h1>
    <label for="fileInput">
        <img id="imageDisplay" alt="Selected Image">
        <br>
        <input type="file" id="fileInput" accept="image/*">
        <br>
        <span>选择图片</span>
    </label>
    <br>
    <textarea id="textOutput" rows="4" cols="50" placeholder="识别结果将显示在这里"></textarea>
    <br>
    <button>一键复制</button>

    <script>
        // 监听文件输入框的变化，读取选中的图片并显示在页面上
        document.getElementById('fileInput').addEventListener('change', function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('imageDisplay').src = e.target.result;
                var imageData = e.target.result.split(',')[1]; // 提取base64数据
                sendDataToServer(imageData);
            };
            reader.readAsDataURL(file);
        });

        // 将图片数据发送到服务器进行OCR识别，并将识别结果显示在文本框中
        function sendDataToServer(imageData) {
            var data = {
                'base64': imageData,
                'options': {
                    "tbpu.parser": "none",
                    "data.format": "txet",
                    "ocr.angle": false,
                    "ocr.language": "简体中文",
                    "ocr.maxSideLen": 1024
                }
            };
            var dataJson = JSON.stringify(data);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://127.0.0.1:1224/api/ocr', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    var texts = response.data.map(function (item) {
                        return item.text;
                    });
                    document.getElementById('textOutput').value = texts.join('\n');
                }
            };
            xhr.send(dataJson);
        }

        // 复制文本框中的文本到剪贴板
        function copyText() {
            var textOutput = document.getElementById('textOutput');
            textOutput.select();
            document.execCommand('copy');
        }
    </script>
</body>

</html>

Abstract009 · 发表于 2024-8-30 13:49:09

666666666666666666666666666666666666666666666666666666666666666666666666666666

守幼金成 · 发表于 2024-7-10 10:06:50

这个有用谢谢

lyjzyq · 发表于 2024-7-5 10:14:26

666666666666666666666666666666666

aosheng · 发表于 2024-7-3 10:21:41

6666666666666666666666

shaojiecn · 发表于 2024-7-3 01:17:49

谢谢，楼主分享

JYYeah · 发表于 2024-6-30 17:55:50

支持开源~！感谢分享!

please · 发表于 2024-6-30 09:38:13

感谢分享，支持开源！！！

jtucar · 发表于 2024-6-30 06:13:05

感谢分享，很给力！~

bianyuan456 · 发表于 2024-6-29 20:21:33

已经顶贴，感谢您对论坛的支持！

		自动登录	找回密码
密码			注册

[其它源码] 调用Umi-OCR的API配合PHP+HTML写了简单图片识别文字

评分

本帖被以下淘专辑推荐: