uniApp前端實現(xiàn)文字識別并提取詳細分析

更新時間：2025年02月27日 09:10:05 作者：博客zhu虎康

這篇文章主要介紹了如何實現(xiàn)文字圖片分析的功能,包括頁面結(jié)構(gòu)、樣式和腳本邏輯,主要步驟包括獲取access_token、將圖片轉(zhuǎn)換為Base64格式、上傳至百度文字識別接口并處理返回結(jié)果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

需求

實現(xiàn)提取文字圖片

分析

官方都有介紹，可以點擊直達：

文字識別OCR
示例調(diào)試控制臺

一、頁面結(jié)構(gòu)（template部分）

在pages目錄下創(chuàng)建一個比如名為imageTextExtract.vue的頁面，其頁面結(jié)構(gòu)代碼如下：

<template>
  <view class="content">
    <button @click="chooseImage">選擇圖片</button>
  </view>
</template>

在這個結(jié)構(gòu)中，有一個用于選擇圖片的按鈕，選好圖片后會顯示對應的圖片，還有一個按鈕用于觸發(fā)文字提取操作，最后提取到的文字內(nèi)容會展示在相應位置。

二、樣式（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端可以運行，但在真機環(huán)境下會卡在轉(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ù)進行解析，如果包含有效的識別結(jié)果，就將識別出的文字拼接起來存到extractedText變量中展示，若返回數(shù)據(jù)不符合預期則提示用戶提取失??；請求失敗時會在控制臺打印錯誤并提示用戶網(wǎng)絡(luò)出現(xiàn)問題。
getAccessToken方法向百度的授權(quán)接口發(fā)送請求來獲取access_token。
getBase64FromPath方法負責讀取圖片文件并轉(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過期時間，秒
    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>

四、注意

請務(wù)必將代碼中的API Key和Secret Key替換為你在百度智能云平臺申請到的真實內(nèi)容

五、補充

1. base64轉(zhuǎn)為圖片

// 假設(shè)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');

總結(jié)

到此這篇關(guān)于uniApp前端實現(xiàn)文字識別并提取的文章就介紹到這了,更多相關(guān)uniApp前端文字識別提取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniApp前端實現(xiàn)文字識別并提取詳細分析

目錄

需求

分析

一、頁面結(jié)構(gòu)（template部分）

二、樣式（style部分）

三、腳本邏輯（script部分）

1. 百度云獲取accessToken

2. 轉(zhuǎn)換為 base 64

3. 上傳至百度云

4. 總體代碼

四、注意

五、補充

1. base64轉(zhuǎn)為圖片

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniApp前端實現(xiàn)文字識別并提取詳細分析

目錄

需求

分析

一、頁面結(jié)構(gòu)（template部分）

二、樣式（style部分）

三、腳本邏輯（script部分）

1. 百度云獲取accessToken

2. 轉(zhuǎn)換為 base 64

3. 上傳至百度云

4. 總體代碼

四、注意

五、補充

1. base64轉(zhuǎn)為圖片

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、頁面結(jié)構(gòu)（template部分）

三、腳本邏輯（script部分）

五、補充