微信小程序使用百度AI識別接口的通用封裝Promise詳解
百度AI開放平臺
百度AI開放平臺是目前市場上主流開放接口平臺之一,新用戶還可領(lǐng)取免費資源(適合我這種勤儉節(jié)約的人),本篇就來介紹如何對百度AI的開放接口進行通用封裝。
百度接口調(diào)用封裝(Promise)
此封裝主要是針對需要上傳圖片識別的接口,比如翻譯,身份證識別,車牌識別等等。其他不需要上傳圖片的接口,把wx.chooseMedia那部分去掉就可以。
前提準(zhǔn)備:
- 注冊百度AI賬號
- 領(lǐng)取對應(yīng)資源
- 創(chuàng)建應(yī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' // 默認(rèn)值
},
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);
})
},
})到此這篇關(guān)于微信小程序使用百度AI識別接口的通用封裝Promise的文章就介紹到這了,更多相關(guān)微信小程序Promise封裝接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端常見的時間轉(zhuǎn)換方法以及獲取當(dāng)前時間方法小結(jié)
在做開發(fā)時會對不同的時間格式進行轉(zhuǎn)換,下面這篇文章主要給大家介紹了關(guān)于前端常見的時間轉(zhuǎn)換方法以及獲取當(dāng)前時間方法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
JS實現(xiàn)圖片預(yù)加載之無序預(yù)加載功能代碼
這篇文章主要介紹了JS實現(xiàn)圖片預(yù)加載之無序預(yù)加載功能代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-05-05
快速實現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
目前很多網(wǎng)站,在圖片加載時均采用了一種名為懶加載的方式,具體表現(xiàn)為,當(dāng)頁面被請求時,只加載可視區(qū)域的圖片,其它部分的圖片則不加載,只有這些圖片出現(xiàn)在可視區(qū)域時才會動態(tài)加載這些圖片,下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實現(xiàn)方法,一起來看看吧。2017-01-01

