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前端文字识别提取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现购物车小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了vue.js 2.*项目环境搭建、运行、打包发布的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了vue中引用swiper轮播插件的方法,在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里。具体实例代码大家跟随脚本之家小编一起看看吧2018-08-08
下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在vue框架下使用指令vue add element安装element报错问题
这篇文章主要介绍了在vue框架下使用指令vue add element安装element报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
这篇文章主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了Vue组件通信方法案例总结,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了如何实现以vite+vue3+Microapp为主应用，以vue2+element为子应用的微前端，感兴趣的小伙伴快跟随小编一起学习一下吧2023-06-06
这篇文章主要介绍了详解vite2.0配置学习(typescript版本)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了vue3如何自定义js文件(插件或配置)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论