uniApp前端實(shí)現(xiàn)文字識別并提取詳細(xì)分析
更新時(shí)間：2025年02月27日 09:10:05 作者：博客zhu虎康
這篇文章主要介紹了如何實(shí)現(xiàn)文字圖片分析的功能,包括頁面結(jié)構(gòu)、樣式和腳本邏輯,主要步驟包括獲取access_token、將圖片轉(zhuǎn)換為Base64格式、上傳至百度文字識別接口并處理返回結(jié)果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
需求
實(shí)現(xiàn)提取文字圖片
分析
官方都有介紹，可以點(diǎn)擊直達(dá)：
一、頁面結(jié)構(gòu)（template部分）
在pages目錄下創(chuàng)建一個(gè)比如名為imageTextExtract.vue的頁面，其頁面結(jié)構(gòu)代碼如下：
<template>
<view class="content">
<button @click="chooseImage">選擇圖片</button>
</view>
</template>
在這個(gè)結(jié)構(gòu)中，有一個(gè)用于選擇圖片的按鈕，選好圖片后會(huì)顯示對應(yīng)的圖片，還有一個(gè)按鈕用于觸發(fā)文字提取操作，最后提取到的文字內(nèi)容會(huì)展示在相應(yīng)位置。
二、樣式（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
首先調(diào)用getAccessToken方法，傳入申請的百度API Key和Secret Key來獲取訪問令牌（access_token），這是調(diào)用百度文字識別 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. 轉(zhuǎn)換為 base 64
接著通過getBase64FromPath方法將選擇的圖片轉(zhuǎn)換為 Base64 編碼格式。
// 轉(zhuǎn)換為base64的函數(shù)
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端可以運(yùn)行，但在真機(jī)環(huán)境下會(huì)卡在轉(zhuǎn) base64 這一環(huán)節(jié)，建議使用以下方法
import { toBase64 } from '@/utils/tobase64'
utils/tobase64.js
/**
* @description 本地圖片轉(zhuǎn)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. 上傳至百度云
- 然后構(gòu)造請求數(shù)據(jù)，向百度文字識別的通用文字識別接口（https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic）發(fā)送 POST 請求，攜帶圖片 Base64 數(shù)據(jù)和access_token。
- 在請求成功回調(diào)中，對返回的數(shù)據(jù)進(jìn)行解析，如果包含有效的識別結(jié)果，就將識別出的文字拼接起來存到extractedText變量中展示，若返回?cái)?shù)據(jù)不符合預(yù)期則提示用戶提取失?。徽埱笫r(shí)會(huì)在控制臺打印錯(cuò)誤并提示用戶網(wǎng)絡(luò)出現(xiàn)問題。
- getAccessToken方法向百度的授權(quán)接口發(fā)送請求來獲取access_token。
- getBase64FromPath方法負(fù)責(zé)讀取圖片文件并轉(zhuǎn)換為 Base64 編碼格式。
// 選擇圖片
function chooseImage () {
uni.chooseImage({
count: 1,
success: (ress) => {
uni.showLoading({
title: '正在識別中...'
})
// 下面將圖片本地路徑轉(zhuǎn)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) // 這就是調(diào)用百度云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()
}
// 轉(zhuǎn)換為base64的函數(shù)
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: '正在識別中...'
})
// 下面將圖片本地路徑轉(zhuǎn)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) // 這就是調(diào)用百度云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過期時(shí)間，秒
let getTokenTime = uni.getStorageSync('tokenGetTime');//token獲取時(shí)間，毫秒
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 {
/*首次進(jìn)入，無token*/
getAccessToken();
}
})
</script>
四、注意
請務(wù)必將代碼中的API Key和Secret Key替換為你在百度智能云平臺申請到的真實(shí)內(nèi)容
五、補(bǔ)充
1. base64轉(zhuǎn)為圖片
// 假設(shè)base64Data是你的base64字符串，extension是圖片的擴(kuò)展名，如'.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...'; // 這里應(yīng)該是你的完整base64字符串
base64ToImage(base64Str, '.png');總結(jié)
到此這篇關(guān)于uniApp前端實(shí)現(xiàn)文字識別并提取的文章就介紹到這了,更多相關(guān)uniApp前端文字識別提取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element?UI?table參數(shù)中的selectable的使用及遇到坑
這篇文章主要介紹了Element?UI?table參數(shù)中的selectable的使用及遇到的坑，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)前臺列表數(shù)據(jù)過濾搜索、分頁效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前臺列表數(shù)據(jù)過濾搜索、分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要給大家介紹了關(guān)于vue watch監(jiān)控對象的簡單方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue 創(chuàng)建組件的兩種方法小結(jié)(必看)
Vue 創(chuàng)建組件的方法有哪些呢？下面小編就為大家分享一篇Vue 創(chuàng)建組件的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue導(dǎo)出頁面為PDF格式的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue導(dǎo)出頁面為PDF格式的實(shí)現(xiàn)思路，其實(shí)思路也很簡單，就是將頁面轉(zhuǎn)換成圖片格式.然后通過圖片的base64碼.生成PDF..感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07
解決error?Couldn‘t?find?a?package.json?file?in報(bào)錯(cuò)的問題
文章介紹了npm依賴包緩存導(dǎo)致重復(fù)下載的問題,提供了刪除node_modules、清除緩存或重啟項(xiàng)目的解決方法,并附帶了查看npm緩存位置的命令2026-03-03
雙Token機(jī)制是一種增強(qiáng)身份驗(yàn)證安全性和提升用戶體驗(yàn)的技術(shù)方案,本文主要介紹了vue中使用雙token機(jī)制,具有一定的參考價(jià)值,感興趣的可以了解一下2025-04-04
關(guān)于vue中hash和history的區(qū)別與使用圖文詳解
vue-router中有hash模式和history模式,下面這篇文章主要給大家介紹了關(guān)于vue中hash和history的區(qū)別與使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue 解決mintui彈窗彈起來,底部頁面滾動(dòng)bug問題
這篇文章主要介紹了vue 解決mintui彈窗彈起來,底部頁面滾動(dòng)bug問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue-cli 引入axios的方法,文中還給大家提到了vue-cli 配置axios的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05