写一个可直接使用的调用百度API的ocr识别的前端页面代码
时间: 2024-02-29 18:55:05 浏览: 72
以下是一个简单的HTML页面代码,可调用百度API的OCR识别功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OCR识别前端页面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>OCR识别前端页面</h1>
<p>请上传需要识别的图片:</p>
<input type="file" id="fileInput">
<button id="recognizeBtn">开始识别</button>
<br>
<p>识别结果:</p>
<div id="result"></div>
<script>
var APP_ID = '你的APP_ID';
var API_KEY = '你的API_KEY';
var SECRET_KEY = '你的SECRET_KEY';
var token;
//获取百度API的token
function getToken() {
$.ajax({
url: 'https://aip.baidubce.com/oauth/2.0/token',
type: 'get',
dataType: 'jsonp',
data: {
grant_type: 'client_credentials',
client_id: API_KEY,
client_secret: SECRET_KEY
},
success: function(res) {
token = res.access_token;
},
error: function(err) {
console.log(err);
}
})
}
//调用百度API进行OCR识别
function recognize(imgUrl) {
$.ajax({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic',
type: 'post',
dataType: 'json',
data: {
access_token: token,
url: imgUrl
},
success: function(res) {
console.log(res);
$('#result').text(res.words_result[0].words);
},
error: function(err) {
console.log(err);
}
})
}
//上传图片并调用识别函数
$('#recognizeBtn').click(function() {
var file = $('#fileInput')[0].files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: 'http://upload.qiniup.com/',
type: 'post',
dataType: 'json',
data: formData,
contentType: false,
processData: false,
success: function(res) {
console.log(res);
var imgUrl = 'http://xxx.xxx.xxx/' + res.key; //替换为你的七牛云域名和文件key
recognize(imgUrl);
},
error: function(err) {
console.log(err);
}
})
})
getToken(); //页面加载时获取token
</script>
</body>
</html>
```
需要替换的地方:
1. 将 `你的APP_ID`、`你的API_KEY` 和 `你的SECRET_KEY` 替换为自己的值,可在百度AI开放平台申请获得。
2. 将 `http://xxx.xxx.xxx/` 替换为你的七牛云域名。
3. 需要引用jQuery库,可自行下载或使用CDN引入。
阅读全文