微信小程序使用百度AI識別接口的通用封裝Promise詳解
百度AI開放平臺
百度AI開放平臺是目前市場上主流開放接口平臺之一,新用戶還可領取免費資源(適合我這種勤儉節(jié)約的人),本篇就來介紹如何對百度AI的開放接口進行通用封裝。
百度接口調(diào)用封裝(Promise)
此封裝主要是針對需要上傳圖片識別的接口,比如翻譯,身份證識別,車牌識別等等。其他不需要上傳圖片的接口,把wx.chooseMedia那部分去掉就可以。
前提準備:
- 注冊百度AI賬號
- 領取對應資源
- 創(chuàng)建應用,拿到
client_id
和client_secret
(本封裝方法的access_token
是在小程序前端獲取的,如果是把access_token
放后端,通過調(diào)用后端接口獲取的,url就換成自己的后端接口即可)。
封裝代碼:
先在utils文件夾下新增BadiduOcr.js
文件,代碼如下:
/* 百度識別封裝 */ function BadiduOcr() { return new Promise(function (resolve, reject) { // 圖片識別 wx.chooseMedia({ // 車牌圖片/拍照 count: 1, // 最多可以選擇的文件個數(shù) mediaType: ['image'], //文件類型 sizeType: ['original', 'compressed'], //是否壓縮所選文件 sourceType: ['album', 'camera'], // 圖片來源 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: '識別中' }) //ans.data:保存了圖片轉(zhuǎn)碼之后的數(shù)據(jù) // 1.請求獲取百度的access_token wx.request({ //url中的&client_id=client-i&client_secret=client—s中的參數(shù)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: {}, //請求參數(shù),此處沒有參數(shù),則置空 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與轉(zhuǎn)碼后的圖片編碼請求百度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 }
調(diào)用
<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封裝接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
前端常見的時間轉(zhuǎn)換方法以及獲取當前時間方法小結(jié)
在做開發(fā)時會對不同的時間格式進行轉(zhuǎn)換,下面這篇文章主要給大家介紹了關于前端常見的時間轉(zhuǎn)換方法以及獲取當前時間方法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01快速實現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
目前很多網(wǎng)站,在圖片加載時均采用了一種名為懶加載的方式,具體表現(xiàn)為,當頁面被請求時,只加載可視區(qū)域的圖片,其它部分的圖片則不加載,只有這些圖片出現(xiàn)在可視區(qū)域時才會動態(tài)加載這些圖片,下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實現(xiàn)方法,一起來看看吧。2017-01-01