百度AI身份证识别demo，使用js提交图片数据

<!DOCTYPE html>
<html lang="zh">
<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>百度AI-身份证识别</title>
</head>
<body>
    <!--如果仅调取相机，使用： capture="camera"-->
    <input type="file"  />

    <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">
        var obj = {};

        $(document).ready(function () {
            getBaiduToken();
            $("#image").change(function () {
                console.log(obj.BAIDU_TOKEN);
                var reader = new FileReader();
                reader.readAsDataURL(this.files[0]);
                reader.onload = function (e) {
                    var base64Image = e.target.result;//或者 reader.result
                    base64Image = base64Image.split(",")[1];
                    console.log(base64Image);
                    parse(base64Image);
                };
            });
        });

        //百度识别
        function parse(base64Image) {
            var url = "https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=" + obj.BAIDU_TOKEN;
            $.ajax({
                url: url,
                type: "post",
                dataType: 'json',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;'
                },
                data: {
                    image: base64Image,
                    id_card_side: 'front'
                },
                success: function (data) {
                    console.log(data);
                    document.write(JSON.stringify(data));
                },
                error: function (xhr, type, errorThrown) {
                    alert('识别失败');
                }
            });
        }

        //获取百度识别token，这里需要后端处理，因为百度获取access-token的接口不支持跨域
        function getBaiduToken() {
            var url = "//www.xxx.com/getaccesstoken";
            $.ajax({
                url: url,
                type: "get",
                dataType: 'json',
                success: function (json) {
                    obj.BAIDU_TOKEN = json.Data;
                }
            });
        }
    </script>
</body>
</html>

只需要修改文中标红的两处地方就可以了。

如果你的需求是在识别的时候，还需要保存下来身份证，那么我建议不要在前端去识别了。直接把图片上传到后端，再由后端调取百度接口去识别。

百度AI身份证识别demo，使用js提交图片数据

相关推荐