首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uniApp前端文字识别提取

uniApp前端实现文字识别并提取详细分析

2025-02-27 09:08:43 作者：博客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前端文字识别提取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！