调用百度Ai
完成一个学生信息录入的网页小案例
添加图片，身份证信息对号入座
官方文档中心：https://ai.baidu.com/docs#/OCR-API/7e4792c7
utils.py
#encoding:utf-8
import requests
import urllib
from urllib import parse
import os
import json
import base64
URL = 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard'
class PersonIdCard(object):
Access_Token_URL = 'https://aip.baidubce.com/oauth/2.0/token'
Access_Key = 'your_ak'
Secret_Key = 'your_sk'
def get_access_token(self):
date = {
'grant_type':'client_credentials',
'client_id':self.Access_Key,
'client_secret':self.Secret_Key
}
headers = {
'Content-Type': 'application/json; charset=UTF-8'
}
resp = requests.post(self.Access_Token_URL,data=date,headers=headers)
return resp.json()['access_token']
def personalMsg(self,access_token,imgInput):
header = {
'Content-Type':'application/x-www-form-urlencoded'
}
f = open(imgInput,'rb')
img = base64.b64encode(f.read())
params = {
'image':img,
'id_card_side':'front',
'access_token':access_token,
}
params = parse.urlencode(params)
resp = requests.post(url=URL,data=params,headers=header)
return json.loads(resp.text)
def getworlds(resp,key):
result = resp['words_result']
return result[key]['words']views.py
p = PersonIdCard()
access_token = p.get_access_token()
resp = p.personalMsg(access_token,os.path.join(settings.MEDIA_ROOT,file.name))
place = getworlds(resp,'住址')
gender = getworlds(resp,'性别')
birthday = getworlds(resp,'出生')
name = getworlds(resp,'姓名')
nation = getworlds(resp,'民族')
idcard = getworlds(resp,'公民身份号码')
data = {
'name':name,'gender':gender,'place':place,'birthday':birthday,'nation':nation,
'idcard':idcard
}后台代码用的django,其它框架类似：personalMsg(access_token，you_file_path)
前台js代码：
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
}
else if (window.URL != undefined) {// mozilla(firefox)
url = window.URL.createObjectURL(file);
}
else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
} //添加一个展示图片的url
$(function () {
var name = $("input[name='name']");
var gender = $("input[name='gender']");
var nation = $("input[name='nation']");
var birthday = $("input[name='birthday']");
var place = $("input[name='place']");
var idcard = $("input[name='idcard']");
var formData = new FormData();
$("#card").change(function () {
var objUrl = getObjectURL(this.files[0]);
$("#mycard").attr('src',objUrl);
formData.append('card',this.files[0]);
myajax.post({
'url':'/person/',
'data':formData,
processData:false,
contentType:false,
'success':function (result) {
if(result['code']==200){
var person = result['data'];
name.val(person['name']);
gender.val(person['gender']);
birthday.val(person['birthday']);
place.val(person['place']);
idcard.val(person['idcard']);
nation.val(person['nation']);
}
}
})
})
})html代码：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>学生档案</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'add_student_archives.css' %}">
<script src="{% static 'xfzajax.js' %}"></script>
<script src="{% static 'add_student_archives.js' %}"></script>
</head>
<body>
<label for="card" class="lab-card">添加身份证照片</label>
<input type="file" id="card" style="display: none">
<img src="" alt="" id="mycard">
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="">
姓名: <input type="text" required autofocus placeholder="请输入姓名" name="name">
</label>
<label for="">
性别: <input type="text" placeholder="请输入性别" name="gender">
</label>
<label for="">
民族: <input type="text" placeholder="请输入民族" name="nation">
</label>
<label for="">
出生日期: <input type="text" placeholder="请输入出生日期" name="birthday">
</label>
<label for="">
住址: <input type="text" placeholder="请输入住址" name="place">
</label>
<label for="">
身份证号: <input type="text" placeholder="请输入身份证号" name="idcard">
</label>
<label for="">
所属学院: <input type="text" list="course" placeholder="选择专业">
<datalist id="course">
<option value="软件设计"></option>
<option value="树媒"></option>
<option value="JAVA"></option>
<option value="Android"></option>
<option value="IOS"></option>
<option value="大数据"></option>
<option value="游戏"></option>
<option value="网安"></option>
</datalist>
</label>
<label for="">
入学日期: <input type="date" value="2016-09-01">
</label>
<label for="">
毕业时间: <input type="date" value="2020-06-01">
</label>
<label for="" class="btn">
<input type="submit" value="保存">
</label>
</fieldset>
</form>
</body>
</html>css
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
background: url("../../media/bg.jpg") no-repeat;
font-family: '汉仪大隶书繁';
}
.lab-card{
padding: 10px 10px 10px 20px;
background: #CCCCCC;
border-radius: 5px;
width: 40px;
float: left;
}
#mycard{
float: left;
}
form {
max-width: 640px;
margin: 24px auto;
font-size: 28px;
background: #FFFFFF;
}
label {
display: block;
margin: 10px 10px 15px;
font-size: 24px;
}
form input {
display: block;
width: 100%;
height: 40px;
font-size: 22px;
margin-top: 10px;
padding: 6px 10px;
color: #333;
border: 1px solid #CCC;
box-sizing: border-box;
}
meter, progress {
display: block;
width: 100%;
margin-top: 10px;
}
.btn {
margin-top: 30px;
}
.btn input {
color: #FFF;
background-color: green;
border: 0 none;
outline: none;
cursor: pointer;
}效果展示：