写一个调用百度API 并 可直接使用的OCR识别前端页面代码
时间: 2024-01-24 16:19:53 浏览: 19
以下是一个使用百度API进行OCR识别的前端页面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OCR 识别</title>
</head>
<body>
<h1>OCR 识别</h1>
<form>
<label for="image">选择图片:</label>
<input type="file" id="image">
<button type="button" onclick="recognize()">识别</button>
</form>
<p id="result"></p>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
function recognize() {
var formData = new FormData();
formData.append('image', $('#image')[0].files[0]);
$.ajax({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic',
type: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
'image': formData,
'access_token': 'YOUR_ACCESS_TOKEN',
'detect_direction': true
},
success: function(data) {
// 解析识别结果
var result = '';
for (var i = 0; i < data.words_result.length; i++) {
result += data.words_result[i].words + '<br>';
}
$('#result').html(result);
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
}
});
}
</script>
</body>
</html>
```
在以上代码中,我们使用了 jQuery 库来方便地进行 AJAX 请求。我们在表单中添加了一个文件选择框,用户可以选择需要识别的图片。当用户点击“识别”按钮时,我们使用 AJAX 向百度 OCR API 发送识别请求,并将识别结果显示在页面上。
需要注意的是,以上代码中的 `access_token` 参数需要替换为您自己的百度 API 访问令牌。此外,如果您需要使用百度 OCR API 的其他功能,您需要相应地修改 API 请求地址和参数。