<!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>
只需要修改文中标红的两处地方就可以了。
如果你的需求是在识别的时候，还需要保存下来身份证，那么我建议不要在前端去识别了。直接把图片上传到后端，再由后端调取百度接口去识别。