利用百度大腦，快速搭建一個紅酒識別的小程序

時間 2019-11-07

標籤利用百度大腦快速搭建一個識別程序简体版

原文原文鏈接

各位開發者接口文檔必定要看哦css

接口文檔 https://ai.baidu.com/docs#/ImageClassify-API/71e05fb6html

如何建立應用。獲取accesstoken 記得必定要看文檔的接入指南哦。官方已經給了圖文教程。小帥這裏就再也不重複說明了。小程序

圖片不清晰的請看這裏 https://my.oschina.net/xshuai/blog/3075992api

--------------------------------------------分割線--------------------------------------------服務器

建立本身的百度智能小程序

官網連接  https://smartprogram.baidu.com/developer/index.html

小程序名稱信息填寫

名稱須要審覈哦最好不要重名、選擇一個本身小程序的LOGO、簡介、服務範圍(必定要選擇正確哦)、標籤就本身找針對性的關鍵詞添加便可

查看本身的小程序

設置-開發設置 記錄本身的小程序id appkey、appsecret等相關重要信息 備用

繼續往下。找到服務器域名 並配置百度ai接口域名  和 圖片轉base64的域名

https://www.ydxiaoshuai.cn
https://aip.baidubce.com

開發工具建立小程序

填寫本身小程序的appid、名稱、項目目錄後點擊完成便可

開始編寫小程序代碼

圖片轉base64 百度智能小程序暫無直接可用組件或api。
小帥爲了方便你們。就封裝了一個在線的http的接口供你們使用。
接口說明地址  https://www.kancloud.cn/ydxiaoshuai/image2base64/1170322

先來寫接口工具類等其餘方法app

baiduai.jside

/**
 * 調用百度紅酒識別示例代碼 baiduai.js
 */
//圖片轉base64接口
let img2base64Url = 'https://www.ydxiaoshuai.cn/image/convert/base64/v1';
let accessToken = ''//本身的accessToken 根據實際狀況能夠進行封裝 自動獲取token
let redwineUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/redwine';//紅酒識別接口
//紅酒接口 圖片數據 返回結果
let redwineRequest = (base64Img,callback)=>{
  //拼接接口body參數
  let params = {
     image:base64Img
  }
  //發送接口請求
  swan.request({
    url: redwineUrl + '?access_token=' + accessToken,
    data:params,
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    success:function(res){
      callback.success(res.data)
    },
    fail: function (res) {
      if (callback.fail)
        callback.fail()
    }
  })
}
function getImg2base64(){
    return img2base64Url;
}
//暴露出去的接口&參數
module.exports = {
  redwineRequest: redwineRequest,
  getImg2base64: getImg2base64
}

編寫頁面樣式及相關代碼

頁面index.swan

頁面須要一個上傳圖片的按鈕 和圖片回顯的區域 還有接口識別返回的數據顯示的區域

帶html標籤代碼 總是被自動解析。只能圖片示例了

樣式index.css工具

給一些稍微友好  好看的ui樣式

.image {
  width: 100%;
  height: 360rpx;
}
button{
  font-family: 微軟雅黑;
}
text{
  font-family: 微軟雅黑;
}
.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding:60rpx;
  height:840rpx;
  border-top: 2rpx solid #D9D9D9;
  border-bottom: 2rpx solid #D9D9D9;
  align-items: center;
  justify-content: center;
}

.faceInfo{
  font-size: 28rpx;
   display:block;
   margin:0 auto;
   margin-left: 33%;
}
.faceInfoValue{
  color: #1BA0E1;
  letter-spacing:0px;
}
.chooseImg {
  display:block;
  margin:0 auto;
  color: rgb(255, 255, 255);
  font-size: 40rpx;
  font-family: 微軟雅黑;
  width: 400rpx;
  height: 100rpx;
  text-align: center;
  line-height: 90rpx;
  border-radius:50rpx;
  background-color:#3366FF;
  margin-top:10px;
}
.img_wrap {
    width: 750rpx;
    height: 620rpx;
    background: #ececec;
}

image {
    width: 100%;
    height: 100%;
    max-height: 1
}
.msg {
    margin: 20rpx 0;
    text-align: center;
}
.table {
 margin-top: 10rpx;
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 80rpx;
  
}
.td {
    font-size: 28rpx;
    width:40%;
     display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.bg-w{

}
.bg-g{
  background: white;
}
.th {
  font-size: 28rpx;
  width: 48%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 80rpx;
  align-items: center;
}
.inner_text{
    font-size: 36rpx;
    color: #1BA0E1;
    font-family: 微軟雅黑;
    word-break: normal;
    word-wrap: break-word;
}
.out_text{
    margin-top:20rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    border: 1rpx solid rgb(238, 238, 238);
    padding:10rpx 10rpx;
    font-size: 36rpx;
    font-family: 微軟雅黑;
}

編寫頁面處理代碼

須要上傳圖片到小帥的圖片轉base64接口。
返回base64數據。再給接口進行識別。
返回數據進行頁面渲染。步驟不是不少哦

var app = getApp();
//引用封裝的工具類方法、圖片轉base64接口地址
var redWine = require('../../utils/baiduai.js');
var img2base64Url = redWine.getImg2base64();
Page({
    data: {
        title: '酒知識 一步即知',
        result:null,
        img:""
    },
uploads: function() {
        var that = this;
        swan.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            success: res => {
                let image = "";
                if(res.tempFiles[0].size > 4096*1024){
                    console.info('jinlaile ');
                    swan.showToast({
                        title: '圖片文件過大哦',
                        icon:'none',
                        mask:true,
                        duration:1500
                    });
                }else{
                    image =  res.tempFilePaths[0];
                }
                that.setData({
                        img:image
                }),
                swan.showLoading({
                    title: '信息正在趕來的路上',
                    mask: true
                }),

                //上傳圖片進行base64轉換
                swan.uploadFile({
                    url: img2base64Url,
                    filePath: image,
                    name: 'file',
                    success:function(res){
                        var data = res.data;
                        console.info('圖片轉base64返回的結果：'+data.code);
                        //若是成功，進行調用紅酒識別接口
                        if(data.code==200){
                            redWine.redwineRequest(data.data.base64,{
                                //接口返回數據。對數據進行賦值
                                success(res){
                                    swan.hideLoading();
                                    that.setData({
                                        result:res.result
                                    })
                                    console.info(res)
                                },
                                fail(res){
                                    swan.hideLoading();
                                    swan.showModal({
                                        title: '識別失敗',
                                        content: '稍後再試一試'
                                    });
                                }
                            })
                        } else {
                            swan.showModal({
                                title: '圖片轉換出錯',
                                content: '圖片轉換出錯'
                            });
                        }
                    }
                });
            }
        });
},
});

準備圖片進行功能測試
紅酒圖

小程序演示圖

上傳代碼進行發佈
上傳代碼

版本號、描述 本身定義便可   最低基礎庫 須要選擇哦

提交審覈

開發管理-開發版本 提交審覈 也能夠選爲體驗版 供部分人員優先體驗

測試帳號 若是沒有 填寫 無 便可  對本身版本的描述 本身編寫便可 提交審覈便可

--------------------------------------------分割線--------------------------------------------開發工具

本次分享end～～～測試

做者：小帥

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。