写一个调用百度API 并 可直接使用的OCR识别前端页面代码
时间: 2024-01-24 19:20:02 浏览: 25
以下是一个简单的前端页面代码,可以调用百度AI的OCR识别API,实现图片文字的识别功能。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OCR识别</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>OCR识别</h1>
<p>请上传需要识别的图片:</p>
<input type="file" @change="uploadImage">
<br>
<br>
<img :src="imageUrl" width="200">
<br>
<br>
<button @click="recognizeText">开始识别</button>
<br>
<br>
<p>识别结果:</p>
<div v-html="result"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
imageUrl: '',
result: ''
},
methods: {
uploadImage(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.imageUrl = reader.result;
};
},
recognizeText() {
const BASE_URL = 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic';
const API_KEY = '您的API_KEY';
const SECRET_KEY = '您的SECRET_KEY';
const imageBase64 = this.imageUrl.split(',')[1];
const requestData = {
image: imageBase64
};
axios.post(`${BASE_URL}?access_token=${this.getAccessToken(API_KEY, SECRET_KEY)}`, requestData, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(response => {
const words = response.data.words_result;
let result = '';
for (let i = 0; i < words.length; i++) {
result += `${i + 1}. ${words[i].words}<br>`;
}
this.result = result;
})
.catch(error => {
console.error(error);
});
},
getAccessToken(apiKey, secretKey) {
const BASE_URL = 'https://aip.baidubce.com/oauth/2.0/token';
const requestData = {
grant_type: 'client_credentials',
client_id: apiKey,
client_secret: secretKey
};
return axios.post(`${BASE_URL}`, requestData, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(response => {
return response.data.access_token;
})
.catch(error => {
console.error(error);
});
}
}
});
</script>
</body>
</html>
```
需要注意的是,该代码中的API_KEY和SECRET_KEY需要替换成你自己申请的百度AI的API Key和Secret Key。