微信小程序使用百度AI识别接口的通用封装Promise详解

 更新时间:2023年04月01日 14:48:50   作者:coderYYY  
这篇文章主要介绍了微信小程序使用百度AI识别接口的通用封装Promise,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

百度AI开放平台

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

百度接口调用封装(Promise)

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

前提准备:

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

封装代码:

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

/* 百度识别封装 */

function BadiduOcr() {
	return new Promise(function (resolve, reject) {
		// 图片识别
		wx.chooseMedia({ // 车牌图片/拍照
			count: 1, // 最多可以选择的文件个数
			mediaType: ['image'], //文件类型
			sizeType: ['original', 'compressed'], //是否压缩所选文件
			sourceType: ['album', 'camera'], // 图片来源
			success(res) { //调用照片选择成功的回调函数
				console.log(res);
				//图片编码部分核心代码 上传到接口需要将图片转为base64格式
				wx.getFileSystemManager().readFile({
					filePath: res.tempFiles[0].tempFilePath,
					encoding: 'base64', //编码格式
					success(ans) {
						// console.log(ans.data)
						wx.showLoading({
							title: '识别中'
						})
						//ans.data:保存了图片转码之后的数据
						// 1.请求获取百度的access_token
						wx.request({
							//url中的&client_id=client-i&client_secret=client—s中的参数client-i和client—s需要申请百度识别的账号和密码,具体申请流程参考上面
							url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=你的client_id&client_secret=你的client_secret',
							data: {}, //请求参数,此处没有参数,则置空
							header: {
								'content-type': 'application/x-www-form-urlencoded' // 默认值
							},
							success(rep) {
								var access_token = rep.data.access_token;
								console.log("access_token:", access_token)
								// 2.带着token与转码后的图片编码请求百度OCR接口,对图片进行识别
								wx.request({
									url: 'https://aip.baidubce.com/百度识别的具体接口?access_token=' + access_token,
									method: 'POST',
									header: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									data: {
										image: ans.data, //ans.data:图片编码
									},
									success(_res) {
										wx.hideLoading();
										resolve(_res)
										console.log("识别成功:", _res)
									},
									fail(_res) {
										wx.hideLoading();
										wx.showToast({
											title: '请求出错',
											icon: 'none'
										})
										reject(_res)
									}
								})
							},
							fail(rep) {
								wx.hideLoading();
								wx.showToast({
									title: '请求出错',
									icon: 'none'
								})
								reject(rep)
							}

						});
					},
					fail(res) {
						wx.hideLoading();
						wx.showToast({
							title: '所选图片编码失败,请重试',
							icon: 'none'
						})
						reject(res)
					}
				})

			},
			fail(res) {
				wx.hideLoading();
				wx.showToast({
					title: '图片选择失败,请重试',
					icon: 'none'
				})
				reject(res)
			}
		})
	})
}
module.exports = {
	BadiduOcr: BadiduOcr
}

调用

   <button width="200rpx" height="64rpx" size="{{30}}" bindtap="getNum" bold>百度识别</tui-button>
import {
    BadiduOcr
} from '../../utils/BadiduOcr'
Page({
	 /* 选择文件,识别 */
    getNum() {
        BadiduOcr().then(res => {
            console.log(res);
            if (res.statusCode == 200) {
                wx.showToast({
                    title: '识别成功',
                })
                
            }
        }).catch(err => {
            console.log(err);
        })
    },
})

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

相关文章

  • 前端常见的时间转换方法以及获取当前时间方法小结

    前端常见的时间转换方法以及获取当前时间方法小结

    在做开发时会对不同的时间格式进行转换,下面这篇文章主要给大家介绍了关于前端常见的时间转换方法以及获取当前时间方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 利用Ext Js生成动态树实例代码

    利用Ext Js生成动态树实例代码

    今天在公司帮同事写了个用Ext Js生成动态树的Demo,在这里分享一下,也好供以后自己查阅。
    2008-09-09
  • Javascript中作用域的详细介绍

    Javascript中作用域的详细介绍

    这篇文章主要为大家详细介绍了Javascript中的作用域,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-10-10
  • Webpack性能优化 DLL 用法详解

    Webpack性能优化 DLL 用法详解

    本篇文章主要介绍了Webpack DLL 用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS实现图片预加载之无序预加载功能代码

    JS实现图片预加载之无序预加载功能代码

    这篇文章主要介绍了JS实现图片预加载之无序预加载功能代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • javascript实现简易的计算器功能

    javascript实现简易的计算器功能

    这篇文章主要为大家详细介绍了javascript实现简易的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • javascript伸缩型菜单实现代码

    javascript伸缩型菜单实现代码

    这是一款真正的JavaScript伸展收缩型菜单,鼠标放上看一看,是不是很酷?鼠标划出菜单项的时候,背景会伸长。菜单没有加链接,想用的自己加,再美化一下,绝对够个性吧。
    2015-11-11
  • JavaScript深入理解系列之call与apply

    JavaScript深入理解系列之call与apply

    Function.prototype.call和Function.prototype.apply都是非常常用的方法,它们的作用一模一样,区别仅在于传入参数形式的不同,下面这篇文章主要介绍了JavaScript深入理解系列之call与apply的相关资料,需要的朋友可以参考下
    2022-04-04
  • JS常见加解密算法小结

    JS常见加解密算法小结

    在Web开发中,保护用户数据是至关重要的,而对数据进行加密是其中一种有效手段,本文将深入浅出地介绍常见的加解密算法,包括消息摘要算法、对称加密算法以及非对称加密算法,需要的朋友可以参考下
    2023-12-12
  • 快速实现JS图片懒加载(可视区域加载)示例代码

    快速实现JS图片懒加载(可视区域加载)示例代码

    目前很多网站,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,下面本文就介绍了JS图片懒加载(可视区域加载)的实现方法,一起来看看吧。
    2017-01-01

最新评论