uniApp前端实现文字识别并提取详细分析
更新时间：2025年02月27日 09:10:05 作者：博客zhu虎康
这篇文章主要介绍了如何实现文字图片分析的功能,包括页面结构、样式和脚本逻辑,主要步骤包括获取access_token、将图片转换为Base64格式、上传至百度文字识别接口并处理返回结果,文中通过代码介绍的非常详细,需要的朋友可以参考下
需求
实现提取文字图片
分析
官方都有介绍，可以点击直达：
一、页面结构（template部分）
在pages目录下创建一个比如名为imageTextExtract.vue的页面，其页面结构代码如下：
<template>
<view class="content">
<button @click="chooseImage">选择图片</button>
</view>
</template>
在这个结构中，有一个用于选择图片的按钮，选好图片后会显示对应的图片，还有一个按钮用于触发文字提取操作，最后提取到的文字内容会展示在相应位置。
二、样式（style部分）
添加如下简单样式让页面布局更合理美观：
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
image {
width: 80%;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
三、脚本逻辑（script部分）
1. 百度云获取accessToken
首先调用getAccessToken方法，传入申请的百度API Key和Secret Key来获取访问令牌（access_token），这是调用百度文字识别 API 的必要凭证。
// 百度云获取accessToken
function getAccessToken () {
uni.setStorageSync('tokenGetTime', new Date().getTime());
uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token?client_id=${你的client_id}&client_secret=${你的client_secret}&grant_type=client_credentials',
method: 'POST',
header: {
"Content-Type": "application/json",
"Accept": "application/json"
},
success: (res) => {
uni.setStorageSync('BDaccessToken', res.data.access_token);
accessToken.value = res.data.access_token
uni.setStorageSync('tokenTime', res.data.expires_in)
},
fail (err) {
console.log("访问失败", err)
}
})
}
2. 转换为 base 64
接着通过getBase64FromPath方法将选择的图片转换为 Base64 编码格式。
// 转换为base64的函数
function toBase64 (path) {
return new Promise((resolve, reject) => {
uni.request({
url: path,
responseType: 'arraybuffer',
success: (res) => {
resolve(uni.arrayBufferToBase64(res.data))
},
fail: (err) => {
reject(err);
}
})
})
}
注意：此方式在H5端可以运行，但在真机环境下会卡在转 base64 这一环节，建议使用以下方法
import { toBase64 } from '@/utils/tobase64'
utils/tobase64.js
/**
* @description 本地图片转base64方法（兼容APP、H5、小程序）
* @param {number} path 图片本地路径
* @returns Promise对象
*/
const toBase64 = (path) => {
return new Promise((resolve, reject) => {
// #ifdef APP-PLUS
plus.io.resolveLocalFileSystemURL(path, (entry) => {
entry.file((file) => {
let fileReader = new plus.io.FileReader()
fileReader.readAsDataURL(file)
fileReader.onloadend = (evt) => {
let base64 = evt.target.result.split(",")[1]
resolve(base64)
}
})
})
// #endif
// #ifdef H5
uni.request({
url: path,
responseType: 'arraybuffer',
success: (res) => {
resolve(uni.arrayBufferToBase64(res.data))
}
})
// #endif
// #ifdef MP-WEIXIN
uni.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: (res) => {
resolve(res.data)
}
})
// #endif
})
}
export {
toBase64
}3. 上传至百度云
- 然后构造请求数据，向百度文字识别的通用文字识别接口（https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic）发送 POST 请求，携带图片 Base64 数据和access_token。
- 在请求成功回调中，对返回的数据进行解析，如果包含有效的识别结果，就将识别出的文字拼接起来存到extractedText变量中展示，若返回数据不符合预期则提示用户提取失败；请求失败时会在控制台打印错误并提示用户网络出现问题。
- getAccessToken方法向百度的授权接口发送请求来获取access_token。
- getBase64FromPath方法负责读取图片文件并转换为 Base64 编码格式。
// 选择图片
function chooseImage () {
uni.chooseImage({
count: 1,
success: (ress) => {
uni.showLoading({
title: '正在识别中...'
})
// 下面将图片本地路径转base64
toBase64(ress.tempFilePaths[0]).then((res) => {
uploadImage(res)
})
},
fail (err) {
uni.hideLoading()
console.log(err)
}
})
}
function uploadImage (path) {
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic',
data: {
image: path, // 图片的base64路径
access_token: accessToken.value, // Access Token
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
uni.hideLoading()
if (res.data.words_result_num > 0) {
console.log('res', res.data.words_result) // 这就是调用百度云OCR接口成功返回的值
} else {
uni.showToast({
title: '未获取到文字',
duration: 1500,
icon: "none"
})
}
},
fail (err) {
uni.hideLoading()
console.log(err)
}
})
}
4. 总体代码
<template>
<view class="content">
<button @click="chooseImage">选择图片</button>
</view>
</template>
<script setup>
import { onLoad, onUnload } from "@dcloudio/uni-app"
import { ref } from 'vue';
const accessToken = ref('')
// 百度云获取accessToken
function getAccessToken () {
uni.setStorageSync('tokenGetTime', new Date().getTime());
uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token?client_id=${你的client_id}&client_secret=${你的client_secret}&grant_type=client_credentials',
method: 'POST',
header: {
"Content-Type": "application/json",
"Accept": "application/json"
},
success: (res) => {
uni.setStorageSync('BDaccessToken', res.data.access_token);
accessToken.value = res.data.access_token
uni.setStorageSync('tokenTime', res.data.expires_in)
},
fail (err) {
console.log("访问失败", err)
}
})
}
function back2Index () {
uni.navigateBack()
}
// 转换为base64的函数
function toBase64 (path) {
return new Promise((resolve, reject) => {
uni.request({
url: path,
responseType: 'arraybuffer',
success: (res) => {
resolve(uni.arrayBufferToBase64(res.data))
},
fail: (err) => {
reject(err);
}
})
})
}
// 选择图片
function chooseImage () {
uni.chooseImage({
count: 1,
success: (ress) => {
uni.showLoading({
title: '正在识别中...'
})
// 下面将图片本地路径转base64
toBase64(ress.tempFilePaths[0]).then((res) => {
uploadImage(res)
})
},
fail (err) {
uni.hideLoading()
console.log(err)
}
})
}
function uploadImage (path) {
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic',
data: {
image: path, // 图片的base64路径
access_token: accessToken.value, // Access Token
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
uni.hideLoading()
if (res.data.words_result_num > 0) {
console.log('res', res.data.words_result) // 这就是调用百度云OCR接口成功返回的值
} else {
uni.showToast({
title: '未获取到文字',
duration: 1500,
icon: "none"
})
}
},
fail (err) {
uni.hideLoading()
console.log(err)
}
})
}
onLoad(() => {
if (uni.getStorageSync('BDaccessToken')) {
let countDoneTime = uni.getStorageSync('tokenTime');//token过期时间，秒
let getTokenTime = uni.getStorageSync('tokenGetTime');//token获取时间，毫秒
let differTime = new Date().getTime() - getTokenTime;
if (differTime > countDoneTime * 1000) {
/*token过期*/
uni.removeStorageSync('BDaccessToken');
uni.removeStorageSync('tokenTime');
uni.removeStorageSync('tokenGetTime');
getAccessToken();
} else {
accessToken.value = uni.getStorageSync('BDaccessToken');
}
} else {
/*首次进入，无token*/
getAccessToken();
}
})
</script>
四、注意
请务必将代码中的API Key和Secret Key替换为你在百度智能云平台申请到的真实内容
五、补充
1. base64转为图片
// 假设base64Data是你的base64字符串，extension是图片的扩展名，如'.png'或'.jpg'
function base64ToImage(base64Data, extension) {
const fs = uni.getFileSystemManager();
const filePath = `${uni.env.USER_DATA_PATH}/temp_image${extension}`; // 图片保存路径
const base64 = base64Data.split(',')[1]; // 获取base64字符串部分
fs.writeFile({
filePath: filePath,
data: base64,
encoding: 'base64',
success: (res) => {
console.log('图片保存成功', filePath);
// 成功保存图片后的操作，比如显示图片等
},
fail: (err) => {
console.error('图片保存失败', err);
}
});
}
// 使用示例
const base64Str = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...'; // 这里应该是你的完整base64字符串
base64ToImage(base64Str, '.png');总结
到此这篇关于uniApp前端实现文字识别并提取的文章就介绍到这了,更多相关uniApp前端文字识别提取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Element UI table参数中的selectable的使用及遇到坑
这篇文章主要介绍了Element UI table参数中的selectable的使用及遇到的坑，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue实现前台列表数据过滤搜索、分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要给大家介绍了关于vue watch监控对象的简单方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Vue 创建组件的方法有哪些呢？下面小编就为大家分享一篇Vue 创建组件的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue导出页面为PDF格式的实现思路，其实思路也很简单，就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧2018-07-07
解决error Couldn‘t find a package.json file in报错的问题
文章介绍了npm依赖包缓存导致重复下载的问题,提供了删除node_modules、清除缓存或重启项目的解决方法,并附带了查看npm缓存位置的命令2026-03-03
双Token机制是一种增强身份验证安全性和提升用户体验的技术方案,本文主要介绍了vue中使用双token机制,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
vue-router中有hash模式和history模式,下面这篇文章主要给大家介绍了关于vue中hash和history的区别与使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue 解决mintui弹窗弹起来,底部页面滚动bug问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue-cli 引入axios的方法,文中还给大家提到了vue-cli 配置axios的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
最新评论