经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Omi » 查看文章
微信小程序使用百度AI识别接口的通用封装Promise详解
来源:jb51  时间:2023/4/3 10:00:40  对本文有异议

百度AI开放平台

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

百度接口调用封装(Promise)

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

前提准备:

  • 注册百度AI账号
  • 领取对应资源
  • 创建应用,拿到client_idclient_secret(本封装方法的access_token是在小程序前端获取的,如果是把access_token放后端,通过调用后端接口获取的,url就换成自己的后端接口即可)。

封装代码:

先在utils文件夹下新增BadiduOcr.js文件,代码如下:

  1. /* 百度识别封装 */
  2.  
  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. }
  67.  
  68. });
  69. },
  70. fail(res) {
  71. wx.hideLoading();
  72. wx.showToast({
  73. title: '所选图片编码失败,请重试',
  74. icon: 'none'
  75. })
  76. reject(res)
  77. }
  78. })
  79.  
  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. }).catch(err => {
  15. console.log(err);
  16. })
  17. },
  18. })

到此这篇关于微信小程序使用百度AI识别接口的通用封装Promise的文章就介绍到这了,更多相关微信小程序Promise封装接口内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号