源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 微信小程序使用百度AI识别接口的通用封装Promise详解 [打印本页]
作者: 洪七公    时间: 2023-4-5 12:59
标题: 微信小程序使用百度AI识别接口的通用封装Promise详解

百度AI开放平台
百度AI开放平台是目前市场上主流开放接口平台之一，新用户还可领取免费资源（适合我这种勤俭节约的人），本篇就来介绍如何对百度AI的开放接口进行通用封装。

百度接口调用封装（Promise）
此封装主要是针对需要上传图片识别的接口，比如翻译，身份证识别，车牌识别等等。其他不需要上传图片的接口，把wx.chooseMedia那部分去掉就可以。

前提准备：

注册百度AI账号
领取对应资源
创建应用，拿到client_id和client_secret（本封装方法的access_token是在小程序前端获取的，如果是把access_token放后端，通过调用后端接口获取的，url就换成自己的后端接口即可）。
封装代码：

先在utils文件夹下新增BadiduOcr.js文件，代码如下：

  1. /* 百度识别封装 */

  3. function BadiduOcr() {
  4.         return new Promise(function (resolve, reject) {
  5.                 // 图片识别
  6.                 wx.chooseMedia({ // 车牌图片/拍照
  7.                         count: 1, // 最多可以选择的文件个数
  8.                         mediaType: ['image'], //文件类型
  9.                         sizeType: ['original', 'compressed'], //是否压缩所选文件
  10.                         sourceType: ['album', 'camera'], // 图片来源
  11.                         success(res) { //调用照片选择成功的回调函数
  12.                                 console.log(res);
  13.                                 //图片编码部分核心代码 上传到接口需要将图片转为base64格式
  14.                                 wx.getFileSystemManager().readFile({
  15.                                         filePath: res.tempFiles[0].tempFilePath,
  16.                                         encoding: 'base64', //编码格式
  17.                                         success(ans) {
  18.                                                 // console.log(ans.data)
  19.                                                 wx.showLoading({
  20.                                                         title: '识别中'
  21.                                                 })
  22.                                                 //ans.data:保存了图片转码之后的数据
  23.                                                 // 1.请求获取百度的access_token
  24.                                                 wx.request({
  25.                                                         //url中的&client_id=client-i&client_secret=client—s中的参数client-i和client—s需要申请百度识别的账号和密码，具体申请流程参考上面
  26.                                                         url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=你的client_id&client_secret=你的client_secret',
  27.                                                         data: {}, //请求参数，此处没有参数，则置空
  28.                                                         header: {
  29.                                                                 'content-type': 'application/x-www-form-urlencoded' // 默认值
  30.                                                         },
  31.                                                         success(rep) {
  32.                                                                 var access_token = rep.data.access_token;
  33.                                                                 console.log("access_token：", access_token)
  34.                                                                 // 2.带着token与转码后的图片编码请求百度OCR接口，对图片进行识别
  35.                                                                 wx.request({
  36.                                                                         url: 'https://aip.baidubce.com/百度识别的具体接口?access_token=' + access_token,
  37.                                                                         method: 'POST',
  38.                                                                         header: {
  39.                                                                                 'Content-Type': 'application/x-www-form-urlencoded'
  40.                                                                         },
  41.                                                                         data: {
  42.                                                                                 image: ans.data, //ans.data：图片编码
  43.                                                                         },
  44.                                                                         success(_res) {
  45.                                                                                 wx.hideLoading();
  46.                                                                                 resolve(_res)
  47.                                                                                 console.log("识别成功：", _res)
  48.                                                                         },
  49.                                                                         fail(_res) {
  50.                                                                                 wx.hideLoading();
  51.                                                                                 wx.showToast({
  52.                                                                                         title: '请求出错',
  53.                                                                                         icon: 'none'
  54.                                                                                 })
  55.                                                                                 reject(_res)
  56.                                                                         }
  57.                                                                 })
  58.                                                         },
  59.                                                         fail(rep) {
  60.                                                                 wx.hideLoading();
  61.                                                                 wx.showToast({
  62.                                                                         title: '请求出错',
  63.                                                                         icon: 'none'
  64.                                                                 })
  65.                                                                 reject(rep)
  66.                                                         }

  68.                                                 });
  69.                                         },
  70.                                         fail(res) {
  71.                                                 wx.hideLoading();
  72.                                                 wx.showToast({
  73.                                                         title: '所选图片编码失败，请重试',
  74.                                                         icon: 'none'
  75.                                                 })
  76.                                                 reject(res)
  77.                                         }
  78.                                 })

  80.                         },
  81.                         fail(res) {
  82.                                 wx.hideLoading();
  83.                                 wx.showToast({
  84.                                         title: '图片选择失败，请重试',
  85.                                         icon: 'none'
  86.                                 })
  87.                                 reject(res)
  88.                         }
  89.                 })
  90.         })
  91. }
  92. module.exports = {
  93.         BadiduOcr: BadiduOcr
  94. }
复制代码

调用
  1.    <button width="200rpx" height="64rpx" size="{{30}}" bindtap="getNum" bold>百度识别</tui-button>
复制代码

  1. import {
  2.     BadiduOcr
  3. } from '../../utils/BadiduOcr'
  4. Page({
  5.          /* 选择文件,识别 */
  6.     getNum() {
  7.         BadiduOcr().then(res => {
  8.             console.log(res);
  9.             if (res.statusCode == 200) {
  10.                 wx.showToast({
  11.                     title: '识别成功',
  12.                 })
  13.                
  14.             }
  15.         }).catch(err => {
  16.             console.log(err);
  17.         })
  18.     },
  19. })
复制代码






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3