uniapp圈中读取文字

### UniApp 中实现文字读取功能 在 UniApp 中实现文字读取功能可以通过集成百度 AI 开放平台的 OCR（光学字符识别）技术完成。以下是具体的技术方案和代码实现。 #### 技术原理 通过调用百度 OCR API 实现图片中的文字提取功能。此过程分为以下几个部分： 1. **获取 Access Token**：使用百度提供的 `client_id` 和 `client_secret` 来请求访问令牌。 2. **图片转换为 Base64 编码**：将用户上传的图片转化为 Base64 字符串以便传输给百度 OCR 接口。 3. **发送 HTTP 请求至百度 OCR API**：携带 Access Token 和 Base64 数据向百度服务器发起 POST 请求，返回解析后的文字内容。 4. **展示结果**：将接收到的文字结果显示在页面上供用户查看。 --- #### 代码实现 ##### 1. 获取 Access Token 定义一个方法用于从百度云端获取 Access Token 并存储到本地缓存中： ```javascript // 百度云获取accessToken function getAccessToken(clientId, clientSecret) { let tokenTime = uni.getStorageSync('tokenGetTime'); if (new Date().getTime() - tokenTime < uni.getStorageSync('tokenTime') * 1000) { return Promise.resolve(uni.getStorageSync('BDaccessToken')); } return new Promise((resolve, reject) => { uni.request({ url: `https://aip.baidubce.com/oauth/2.0/token?client_id=${clientId}&client_secret=${clientSecret}&grant_type=client_credentials`, method: 'POST', header: { "Content-Type": "application/json", "Accept": "application/json" }, success(res) { if (res.statusCode === 200 && res.data.access_token) { uni.setStorageSync('BDaccessToken', res.data.access_token); uni.setStorageSync('tokenTime', res.data.expires_in); uni.setStorageSync('tokenGetTime', new Date().getTime()); resolve(res.data.access_token); } else { reject(new Error("Token Request Failed")); } }, fail(err) { reject(err); } }); }); } ``` 此处实现了动态刷新机制以减少不必要的网络开销[^3]。 --- ##### 2. 将图片转为 Base64 格式 为了适配不同环境下的需求，在前端直接将图片编码成 Base64 形式再提交给后台处理： ```javascript export function imageToBase64(filePath) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => { resolve(reader.result.split(',')[1]); }; reader.onerror = error => reject(error); // 如果运行于 H5 或其他支持 File 对象环境中可直接加载文件路径；对于小程序则需额外逻辑转化 try { plus.io.resolveLocalFileSystemURL(filePath, entry => { entry.file(fileObj => { reader.readAsDataURL(fileObj); }, err => reject(err)); }, err => reject(err)); } catch (e) { reject(e.message || e.toString()); } }); } ``` 注意该片段适用于 Android/iOS 原生插件开发场景下使用 Plus SDK 完成实际操作[^2]。 --- ##### 3. 发送请求至百度 OCR API 利用前面准备好的参数构建完整的接口调用流程如下所示： ```javascript async function recognizeText(imagePath, clientId, clientSecret) { const accessToken = await getAccessToken(clientId, clientSecret); const base64Image = await imageToBase64(imagePath); return new Promise((resolve, reject) => { uni.request({ url: `https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=${accessToken}`, method: 'POST', data: { image: base64Image }, header: { 'content-type': 'application/x-www-form-urlencoded' }, success(response) { if (response.statusCode === 200 && response.data.words_result) { resolve(response.data.words_result.map(word => word.words).join('\n')); } else { reject(new Error(`Recognition failed with status ${response.statusCode}`)); } }, fail(error) { reject(error); } }); }); } ``` 以上函数封装了一个异步任务链路，依次完成了认证授权、图像预处理以及最终的数据交互环节[^1]。 --- ##### 4. 页面绑定事件触发器 最后一步是在视图层面上设计按钮控件让用户能够方便快捷地启动整个工作流： ```html <view> <button @click="chooseAndRecognize">选择图片并识别</button> <text>{{ recognizedText }}</text> </view> <script> import { recognizeText } from './utils/textRecognizer'; export default { data() { return { recognizedText: '', baiduClientId: 'your_client_id_here', baiduClientSecret: 'your_client_secret_here' }; }, methods: { async chooseAndRecognize() { const imagePath = await this.selectImageFromGallery(); try { this.recognizedText = await recognizeText( imagePath, this.baiduClientId, this.baiduClientSecret ); } catch (error) { console.error('Error during text recognition:', error); this.recognizedText = '无法识别，请重试'; } }, selectImageFromGallery() { return new Promise((resolve, reject) => { uni.chooseImage({ count: 1, sizeType: ['original'], sourceType: ['album'], success(res) { resolve(res.tempFilePaths[0]); }, fail(err) { reject(err.errMsg); } }); }); } } }; </script> ``` 这里展示了如何结合 Vue 组件语法编写交互界面，并且引入外部工具辅助核心业务逻辑执行效率最大化的同时保持良好的用户体验效果[^4]。 --- ###