智能识别，一键兑换：腾讯云OCR智能结构化高级版识别在零售行业的应用实践

原创

快乐的小白

发布于 2025-01-12 15:36:42

1710

文章被收录于专栏：小白开发小白开发

背景：某小超市想搞一个积分兑换功能。然而这个超市没有现成的会员积分系统，然后问问我有什么办法能解决，我首先是想到了做一个小程序，但是商家觉得太麻烦了，然后收银系统也没办法去和小程序进行对接。我就推荐商家做一个可以上传小票的入口，让顾客扫码上传自己的小票，增加积分！但是这就有一个问题谁来审核积分？这个时候我就说了上传后能自动识别，然后就做了一版代码让商家看看效果，下面给大家弄一下思路和部分代码。

然后很大一部分思路也参考了我之前写的文章。

简化车辆登记流程：利用腾讯云OCR实现自动化信息识别

https://cloud.tencent.com/developer/article/2323707

首先做这个系统解决的问题：

人工审核效率低：客户需要将小票交给店员，由店员手动输入信息，耗时耗力。
数据准确性差：人工审核容易出错，导致积分兑换数据不准确。
客户体验不佳：手动输入小票信息影响客户体验，客户满意度低。

准备开干：

注册腾讯云账号：访问腾讯云官网，注册并登录账号。
开通智能结构化OCR服务：在控制台中开通智能结构化OCR服务，选择基础或高级版本,这边尝试高级版吧！

https://cloud.tencent.com/product/smart-ocr?from_column=20421&from=20421

3.开发积分系统：基于腾讯云智能结构化OCR的API接口，开发一个简单的积分系统，实现小票上传、识别和积分录入功能。

3.1 前端简化代码，新建一个index.htm的文件，然后将代码复制到里面，保存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拍照积分</title>
    <link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css">
</head>
<body>
    <div class="weui-cells__title">拍照积分</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">上传小票及消费凭证照片</p>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                        <div class="weui-uploader__input-box">
                            <input class="weui-uploader__input" type="file" accept="image/*" capture="camera" id="uploaderInput">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="submitBtn">立即提交</a>
    </div>
    <div class="weui-cells__title">积分规则</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>1. 消费后请在7天内上传，超过7天的票据系统无法积分。</p>
            </div>
        </div>
    </div>

    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script>
        // 监听文件选择事件
        document.getElementById('uploaderInput').addEventListener('change', function (event) {
            var files = event.target.files;
            var file = files[0];

            if (!file) {
                return;
            }

            // 创建 FileReader 对象，用于读取文件
            var reader = new FileReader();

            reader.onload = function (e) {
                var base64Data = e.target.result; // 获取图片的Base64数据

                // 创建图片元素并显示在页面上
                var img = document.createElement('img');
                img.src = base64Data;
                img.style.maxWidth = '100%';
                img.style.marginTop = '10px';
                document.getElementById('uploaderFiles').innerHTML = '';
                document.getElementById('uploaderFiles').appendChild(img);
            };

            reader.readAsDataURL(file);
        });

        // 监听提交按钮点击事件
        document.getElementById('submitBtn').addEventListener('click', function () {
            var img = document.querySelector('#uploaderFiles img');
            if (!img) {
                alert('请先选择图片');
                return;
            }

            var base64Data = img.src.split(',')[1]; // 提取图片的Base64数据
            // 创建一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 设置请求方法和URL
            xhr.open('POST', './20250111.php', true);

            // 设置请求头，指定发送的数据类型为form-urlencoded
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.addEventListener("load", function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    alert("小票已上传，积分将在7个工作日内到账。");
                    location.reload();
                }
            });

            var data = JSON.stringify({ ImageBase64: base64Data });


            // 发送请求
            xhr.send(data);
        });
    </script>
</body>
</html>

3.2 后端简化代码，新建一个20250111.php文件，然后将代码保存进去！(我测试的php版本是7.4，大家尽量在5.6以上的php版本上测试吧)

<?php

$postData = file_get_contents('php://input');

$data = json_decode($postData, true);
$ImageBase64 = $data['ImageBase64'];

if (empty($ImageBase64)) {
    echo "Base64字符串为空";
    exit;
}

// 去掉前缀
$ImageBase64 = str_replace('data:image/png;base64,', '', $ImageBase64);
$ImageBase64 = str_replace(' ', '+', $ImageBase64);

// 根据当前时间戳进行命名保存到本地
$filename = date('YmdHis') . '.png';

// 解码Base64字符串
$imageData = base64_decode($ImageBase64);

if ($imageData === false) {
    echo "Base64解码失败";
    exit;
}

// 保存文件
if (file_put_contents($filename, $imageData) === false) {
    echo "文件保存失败";
    exit;
}
//图片地址
$ImageUrl = 'http://您的域名/'.$filename;


if($ImageUrl){
// 获取base64Data的值
    $Action = 'SmartStructuralPro';

    $SecretId = 'API密钥中的SecretId'; //API密钥中的SecretId
    $secretKey = 'API密钥中的SecretKey';    //API密钥中的SecretKey
    $Timestamp = time();
    $Nonce = rand(1000, 9999);
    $Region = 'ap-beijing';
    $Version = '2018-11-19';

    $param["Nonce"] = $Nonce;
    $param["Timestamp"] = $Timestamp;
    $param["Region"] = $Region;
    $param["SecretId"] = $SecretId;
    $param["Action"] = $Action;
    $param["Version"] = $Version;
    $param["ImageUrl"] = $ImageUrl;
    $param["Language"] = "zh-CN";
    //排序
    ksort($param);
    //拼接
    $signStr = "GETocr.ap-beijing.tencentcloudapi.com/?";
    foreach ($param as $key => $value) {
        $signStr = $signStr . $key . "=" . $value . "&";
    }
    $signStr = substr($signStr, 0, -1);
    //使用HMAC-SHA1算法，将上一步中获得的签名原文字符串进行加密，并对加密后的签名串使用Base64编码，得到最终的签名串
    //对加密后的签名串使用urlencode编码，得到最终的签名串
    $signature = urlencode(base64_encode(hash_hmac("sha1", $signStr, $secretKey, true)));
    $URL = "https://ocr.ap-beijing.tencentcloudapi.com/?Action=" . $Action . "&Version=" . $Version . "&Region=" . $Region . "&ImageUrl=" . $ImageUrl . "&Timestamp=" . $Timestamp . "&Nonce=" . $Nonce . "&SecretId=" . $SecretId . "&Signature=" . $signature . "&Language=zh-CN";
    print_r(get_url($URL));  //调用get 方法的curl
}
/*curl get方法*/
function get_url($durl)
{
    // header传送格式
    $headers = array();
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $durl);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_BINARYTRANSFER, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLINFO_HEADER_OUT, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    $data = curl_exec($curl);
    curl_close($curl);
    return $data;
}

3.3 将上面的代码都复制到服务器里，修改一下php里的参数，有三块地方是必须要修改的，请根据自己的参数进行修改。