<!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" id="image" accept="image/*" />

    <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提交图片数据的更多相关文章

  1. 基于百度AI人脸识别技术的Demo

    编写demo之前首先浏览官方API:http://ai.baidu.com/docs#/Face-API/top 下面是源码: package com.examsafety.test; import ...

  2. 百度AI接口---身份证识别Demo

    题记:自己是做java web的,但是本人以前接触并学习很多图像的知识,所以对图像很敏感.下面以百度的一个接口,实现身份证识别案例 1.需要百度开发者AppID.SecretKey .API Key. ...

  3. 百度AI人脸识别的学习总结

    本文主要分以下几个模块进行总结分析 项目要求:运用百度AI(人脸识别)通过本地与外网之间的信息交互(MQService),从而通过刷脸实现登陆.签字.会议签到等: 1.准备工作: 内网:单击事件按钮— ...

  4. Android Study 玩转百度ocr身份证识别不是梦~

    前言 Today,由于昨晚喝蒙了,今天晕乎乎的为大家带来如何快速集入ocr身份证识别. 关于ocr的前世今生这里不做过多的说明,百度一抓一大把. 前期准备 百度AI开放平台ocr地址: https:/ ...

  5. Python 百度ai身份证接口案例

    调用百度Ai 完成一个学生信息录入的网页小案例 添加图片,身份证信息对号入座 官方文档中心:https://ai.baidu.com/docs#/OCR-API/7e4792c7 utils.py # ...

  6. 百度AI车牌识别测试

    测试背景 百度已发布诸多AI应用,其中包含车牌识别,免费使用量是200次/日.付费的话,按月调用次数在20万次到50万次之间,每日10000次,月费用为0.0035*300000=1050元. 详见: ...

  7. 基于C# 调用百度AI 人脸识别

    一.设置 登录百度云控制台,添加应用-添加人脸识别,查找,对比等. 记住API Key和Secret Key 二.创建Demo程序 1.使用Nuget安装 Baidu.AI 和 Newtonsoft. ...

  8. 百度AI图片识别

    官方文档:http://ai.baidu.com/tech/ocr/general

  9. 技能节-AI人脸识别

    我们收到技能节项目的通知是在两周之前,项目要求做个人脸评分系统. 两周时间写一个"人脸评分系统",好像时间比较紧了,还好我们完成了~这个项目是将摄像头捕获到的包含人脸的图像传输到百 ...

随机推荐

  1. CF528D Fuzzy Search 和 BZOJ4259 残缺的字符串

    Fuzzy Search 给你文本串 S 和模式串 T,求 S 的每个位置是否能模糊匹配上 T. 这里的模糊匹配指的是把 T 放到 S 相应位置上之后,T 中每个字符所在位置附近 k 个之内的位置上的 ...

  2. LeetCode 722. Remove Comments

    原题链接在这里:https://leetcode.com/problems/remove-comments/ 题目: Given a C++ program, remove comments from ...

  3. 模拟测试20191017～18 lrd Day1& Day2

    $Day1:$ $T1:位运算$ 从低位到高位分类讨论就好了 记得判$inf$ $T2:集合论$ 考场上差点就打线段树了 用一个数组维护,同时用一个变量代表当前总体$+$&&$-$的值 ...

  4. 洛谷 P5614题解

    吐槽:数据好像有点水,直接枚举到200可以得80 points. 另:我还是太弱了,比赛的时候只有90 points,#7死卡不过去,最后发现是没有判断 \(z_1\) 和 \(z_2\) 的范围-- ...

  5. myeclipse的安装与破解

    myeclipe安装和破解一直困扰我很长时间,我又是尴尬症的人,不破解就是不行,花费一天时间终于搞定是怎么破解的. 一:首先myeclipse的官方下载网站www.myeclipsecn.com/do ...

  6. eclipse 如何将文件编辑器窗口的背景填充为背景图片？

        1.情景展示 文件编辑窗口的背景默认为白色. 我们知道,对于整日面对电脑的程序员来说,白色容易造成眼疲劳,而且对于眼睛的伤害比较大. 所以,eclipse添加了黑色主题. 切换成黑色主题 改变 ...

  7. spring（一）IOC & AOP

    参考文档: spring详解:http://www.cnblogs.com/ysocean/p/7466191.html(可以说非常详细了) aop源码详解:https://www.cnblogs.c ...

  8. java复制对象之深拷背

    在java开发中,有时我们需要复制对象,并且确保修改复制得到的对象不会影响原来的对象. 于是,有些人可能会写出类似以下的代码: public class CloneTest { public stat ...

  9. Writeup：第五届上海市大学生网络安全大赛-Web

    目录 Writeup:第五届上海市大学生网络安全大赛-Web 一.Decade 无参数函数RCE(./..) 二.Easysql 三.Babyt5 二次编码绕过strpos Description: ...

  10. Java重启后不能打开的一些解决方法

    点开环境变量设置,重新确定一下(据说是win10的原因) 将环境变量中path与CLASSPATH中的%JAVA_HOME%改为JAVA_HOME的值.参考https://blog.csdn.net/ ...