<!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>
只需要修改文中標紅的兩處地方就可以了。
如果你的需求是在識別的時候，還需要保存下來身份證，那么我建議不要在前端去識別了。直接把圖片上傳到后端，再由后端調取百度接口去識別。