微信小程序使用百度AI識(shí)別接口的通用封裝Promise詳解
百度AI開(kāi)放平臺(tái)
百度AI開(kāi)放平臺(tái)是目前市場(chǎng)上主流開(kāi)放接口平臺(tái)之一,新用戶還可領(lǐng)取免費(fèi)資源(適合我這種勤儉節(jié)約的人),本篇就來(lái)介紹如何對(duì)百度AI的開(kāi)放接口進(jìn)行通用封裝。
百度接口調(diào)用封裝(Promise)
此封裝主要是針對(duì)需要上傳圖片識(shí)別的接口,比如翻譯,身份證識(shí)別,車牌識(shí)別等等。其他不需要上傳圖片的接口,把wx.chooseMedia那部分去掉就可以。
前提準(zhǔn)備:
- 注冊(cè)百度AI賬號(hào)
- 領(lǐng)取對(duì)應(yīng)資源
- 創(chuàng)建應(yīng)用,拿到
client_id
和client_secret
(本封裝方法的access_token
是在小程序前端獲取的,如果是把access_token
放后端,通過(guò)調(diào)用后端接口獲取的,url就換成自己的后端接口即可)。
封裝代碼:
先在utils文件夾下新增BadiduOcr.js
文件,代碼如下:
/* 百度識(shí)別封裝 */ function BadiduOcr() { return new Promise(function (resolve, reject) { // 圖片識(shí)別 wx.chooseMedia({ // 車牌圖片/拍照 count: 1, // 最多可以選擇的文件個(gè)數(shù) mediaType: ['image'], //文件類型 sizeType: ['original', 'compressed'], //是否壓縮所選文件 sourceType: ['album', 'camera'], // 圖片來(lái)源 success(res) { //調(diào)用照片選擇成功的回調(diào)函數(shù) console.log(res); //圖片編碼部分核心代碼 上傳到接口需要將圖片轉(zhuǎn)為base64格式 wx.getFileSystemManager().readFile({ filePath: res.tempFiles[0].tempFilePath, encoding: 'base64', //編碼格式 success(ans) { // console.log(ans.data) wx.showLoading({ title: '識(shí)別中' }) //ans.data:保存了圖片轉(zhuǎn)碼之后的數(shù)據(jù) // 1.請(qǐng)求獲取百度的access_token wx.request({ //url中的&client_id=client-i&client_secret=client—s中的參數(shù)client-i和client—s需要申請(qǐng)百度識(shí)別的賬號(hào)和密碼,具體申請(qǐng)流程參考上面 url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=你的client_id&client_secret=你的client_secret', data: {}, //請(qǐng)求參數(shù),此處沒(méi)有參數(shù),則置空 header: { 'content-type': 'application/x-www-form-urlencoded' // 默認(rèn)值 }, success(rep) { var access_token = rep.data.access_token; console.log("access_token:", access_token) // 2.帶著token與轉(zhuǎn)碼后的圖片編碼請(qǐng)求百度OCR接口,對(duì)圖片進(jìn)行識(shí)別 wx.request({ url: 'https://aip.baidubce.com/百度識(shí)別的具體接口?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("識(shí)別成功:", _res) }, fail(_res) { wx.hideLoading(); wx.showToast({ title: '請(qǐng)求出錯(cuò)', icon: 'none' }) reject(_res) } }) }, fail(rep) { wx.hideLoading(); wx.showToast({ title: '請(qǐng)求出錯(cuò)', icon: 'none' }) reject(rep) } }); }, fail(res) { wx.hideLoading(); wx.showToast({ title: '所選圖片編碼失敗,請(qǐng)重試', icon: 'none' }) reject(res) } }) }, fail(res) { wx.hideLoading(); wx.showToast({ title: '圖片選擇失敗,請(qǐng)重試', icon: 'none' }) reject(res) } }) }) } module.exports = { BadiduOcr: BadiduOcr }
調(diào)用
<button width="200rpx" height="64rpx" size="{{30}}" bindtap="getNum" bold>百度識(shí)別</tui-button>
import { BadiduOcr } from '../../utils/BadiduOcr' Page({ /* 選擇文件,識(shí)別 */ getNum() { BadiduOcr().then(res => { console.log(res); if (res.statusCode == 200) { wx.showToast({ title: '識(shí)別成功', }) } }).catch(err => { console.log(err); }) }, })
到此這篇關(guān)于微信小程序使用百度AI識(shí)別接口的通用封裝Promise的文章就介紹到這了,更多相關(guān)微信小程序Promise封裝接口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端常見(jiàn)的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法小結(jié)
在做開(kāi)發(fā)時(shí)會(huì)對(duì)不同的時(shí)間格式進(jìn)行轉(zhuǎn)換,下面這篇文章主要給大家介紹了關(guān)于前端常見(jiàn)的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01利用Ext Js生成動(dòng)態(tài)樹(shù)實(shí)例代碼
今天在公司幫同事寫(xiě)了個(gè)用Ext Js生成動(dòng)態(tài)樹(shù)的Demo,在這里分享一下,也好供以后自己查閱。2008-09-09JS實(shí)現(xiàn)圖片預(yù)加載之無(wú)序預(yù)加載功能代碼
這篇文章主要介紹了JS實(shí)現(xiàn)圖片預(yù)加載之無(wú)序預(yù)加載功能代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03javascript伸縮型菜單實(shí)現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單,鼠標(biāo)放上看一看,是不是很酷?鼠標(biāo)劃出菜單項(xiàng)的時(shí)候,背景會(huì)伸長(zhǎng)。菜單沒(méi)有加鏈接,想用的自己加,再美化一下,絕對(duì)夠個(gè)性吧。2015-11-11快速實(shí)現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
目前很多網(wǎng)站,在圖片加載時(shí)均采用了一種名為懶加載的方式,具體表現(xiàn)為,當(dāng)頁(yè)面被請(qǐng)求時(shí),只加載可視區(qū)域的圖片,其它部分的圖片則不加載,只有這些圖片出現(xiàn)在可視區(qū)域時(shí)才會(huì)動(dòng)態(tài)加載這些圖片,下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實(shí)現(xiàn)方法,一起來(lái)看看吧。2017-01-01