首頁 > 軟體

微信小程式使用百度AI識別介面的通用封裝Promise詳解

2023-04-02 06:00:57

百度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封裝介面內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com